javascript - 无法在表中动态添加新行

Question

我正在尝试在用户端的表中添加新行。我已经做到了，但是它只是第一次进入新行，当你第二次点击添加行按钮时，没有任何反应。

function insTableRow(tableID) {
  var x = document.getElementById(tableID);
  var get_row = x.rows[2];
  get_row.style.display = '';
  console.log(get_row);
  $("#" + tableID + " tbody").append(get_row);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
  <thead>
    <tr>
      <th>Institute Name</th>
      <th>Qualification</th>
      <th>Admission Date</th>
      <th>Graduation Date</th>
      <th>Degree Scanned Image</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td></td>
    </tr>
    <tr style="display:none;">
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><input type="text" class="form-control" name="txt[]" id="number" /></td>
      <td><i id="add" class="fa fa-minus-circle fa-2x fa-fw" onclick="delTableRow('educationTable')"></i></td>
    </tr>
  </tbody>
</table>

工作 jsfiddle

知道为什么第二次不添加新行吗？

Answer 1

您的问题是因为您选择了同一行并在每次点击时附加它。您不是在创建新行。要解决此问题，您可以克隆该行并附加该新实例。

另请注意，您应避免在 HTML 中使用过时的 on* 事件处理程序。因为您已经在页面中包含了 jQuery，所以您可以使用它在 HTML 之外附加您的事件。此外，您可以在 delete 图标上使用委托(delegate)事件处理程序来删除单击的行。试试这个:

$('#add').click(function() {
  var $row = $('#educationTable').find('tr:last');
  $row.clone().insertBefore($row).show();
});

$('#educationTable').on('click', '.delete', function() {
  $(this).closest('tr').remove();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
  <thead>
    <tr>
      <th>Institute Name</th>
      <th>Qualification</th>
      <th>Admission Date</th>
      <th>Graduation Date</th>
      <th>Degree Scanned Image</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td></td>
    </tr>
    <tr style="display:none;">
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><input type="text" class="form-control" name="txt[]" /></td>
      <td><i class="delete fa fa-minus-circle fa-2x fa-fw"></i></td>
    </tr>
  </tbody>
</table>

另请注意，我删除了重复的 id="number"，因为在多个元素中重复相同的 id 属性是无效的 HTML。为此使用一个类。