Question

我已经写了一个代码来制作一个动态表。如果有多于1行，当我单击删除按钮时，所有字段值都将被删除。我只需要删除按删除按钮的单行数据。请查看我的代码（您需要运行此代码以了解我的问题）

function addNewRow() {
  // body...
  var table_name = document.getElementById('mytable');
  var index = table_name.rows.length;
  var row = table_name.insertRow(index);
  var cell1 = row.insertCell(0);

  ///////	
  var cell2 = row.insertCell(1);
  var t1 = document.createElement("input");
  t1.type = "text";
  t1.id = 'name';
  cell2.appendChild(t1);
  /////
  var cell3 = row.insertCell(2);
  var t2 = document.createElement("input");
  t2.type = "email";
  t2.id = 'email';
  cell3.appendChild(t2);
  /////
  var cell4 = row.insertCell(3);
  var t3 = document.createElement("input");
  var t4 = document.createElement("input");
  t4.type = "button";
  t3.type = "reset";
  t4.id = "Save";
  t3.id = "Delete";
  t4.value = "Save";
  t3.value = "Delete";

  cell4.appendChild(t4);
  cell4.appendChild(t3);

  t4.onclick = function() {
    alert("hello");
  }

  t3.onclick = function() {
    $(document).ready(function() {

      $('#name').val('');
      $('#email').val('');
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="addNewRow()"> Add a new row</button>
<table border="1" width="500px" height="50px" id="mytable">
  <tr>
    <th id="id_no">id</th>
    <th>Name</th>
    <th>Email</th>
    <th>Action</th>
  </tr>
</table>

Answer 1

我必须添加数字以使ID唯一，然后您才能使用此点击功能

t3.onclick = function() {
  var num = this.id.replace('Delete', '');
  $('#name' + num + ', #email' + num).val('') // $('#name0, #email0').val('')
}

演示

var idSuffix = 0;

function addNewRow() {
  // body...
  var table_name = document.getElementById('mytable');
  var index = table_name.rows.length;
  var row = table_name.insertRow(index);
  var cell1 = row.insertCell(0);

  /////// 
  var cell2 = row.insertCell(1);
  var t1 = document.createElement("input");
  t1.type = "text";
  t1.id = 'name'  + idSuffix;
  cell2.appendChild(t1);
  /////
  var cell3 = row.insertCell(2);
  var t2 = document.createElement("input");
  t2.type = "email";
  t2.id = 'email'  + idSuffix;
  cell3.appendChild(t2);
  /////
  var cell4 = row.insertCell(3);
  var t3 = document.createElement("input");
  var t4 = document.createElement("input");
  t4.type = "button";
  t3.type = "reset";
  t4.id = "Save" + idSuffix;
  t3.id = "Delete" + idSuffix;
  t4.value = "Save";
  t3.value = "Delete";

  cell4.appendChild(t4);
  cell4.appendChild(t3);

  t4.onclick = function() {
    alert("hello");
  }

  t3.onclick = function() {
    var num = this.id.replace('Delete', '');
    $('#name' + num + ', #email' + num).val('')
  }
  idSuffix++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="addNewRow()"> Add a new row</button>
<table border="1" width="500px" height="50px" id="mytable">
  <tr>
    <th id="id_no">id</th>
    <th>Name</th>
    <th>Email</th>
    <th>Action</th>
  </tr>
</table>

Answer 2

您必须在文本框和按钮中添加唯一值。

这是我添加计数器的代码：

var counter = 0;
function addNewRow() {
  // body...
  var table_name = document.getElementById('mytable');
  var index = table_name.rows.length;
  var row = table_name.insertRow(index);
  var cell1 = row.insertCell(0);
  var t0 = document.createElement("label");
  t0.type = "label";
  t0.innerHTML  =counter;
  cell1.appendChild(t0);

  /////// 
  var cell2 = row.insertCell(1);
  var t1 = document.createElement("input");
  t1.type = "text";
  t1.id = 'name_'  + counter;
  cell2.appendChild(t1);
  /////
  var cell3 = row.insertCell(2);
  var t2 = document.createElement("input");
  t2.type = "email";
  t2.id = 'email_'  + counter;
  cell3.appendChild(t2);
  /////
  var cell4 = row.insertCell(3);
  var t3 = document.createElement("input");
  var t4 = document.createElement("input");
  t4.type = "button";
  t3.type = "reset";
  t4.id = "Save_" + counter;
  t3.id = "Delete_" + counter;
  t4.value = "Save";
  t3.value = "Delete";

  cell4.appendChild(t4);
  cell4.appendChild(t3);

  counter++;
  
  t4.onclick = function() {
    alert("hello");
  }

  t3.onclick = function() {
    var delId = this.id.replace('Delete_', '');
    $('#name_' + delId ).val('');
	$('#email_' + delId ).val('');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onclick="addNewRow()"> Add a new row</button>
<table border="1" width="500px" height="50px" id="mytable">
  <tr>
    <th id="id_no">id</th>
    <th>Name</th>
    <th>Email</th>
    <th>Action</th>
  </tr>
</table>

所有字段值均被删除

2 个答案: