JavaScript - 添加行在 tbody 标签后添加行，需要在 tbody 内添加

Question

我在 JavaScript 中添加行时遇到问题。一切正常，但在 tbody 标签之后添加了行。我需要在 tbody 中添加。

片段:

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById('add-row').deleteRow(i);
}

function insRow() {
  var x = document.getElementById('add-row');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;

  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  x.appendChild(new_row);
}

<table class="table  table-hover" id="add-row">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th style="text-align:right;">Delete</th>
    </tr>
  </thead>
  <tbody id="add-row1">
    <tr>
      <td>1</td>
      <td>
        <input type="text" class="form-control input-sm" placeholder="Enter Group Name" id="group" />
      </td>
      <td class="pull-right">
        <button class="btn btn-sm btn-danger" id="delPOIbutton" onclick="deleteRow(this)"><i class="fa fa-close"></i> Delete</button>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        <button class="btn btn-sm btn-success pull-right"><i class="fa fa-save"></i> Save</button>
        <button class="btn btn-sm btn-primary" id="addmorePOIbutton" onclick="insRow()"> <i class="fa fa-plus"></i> Add</button>
      </td>
    </tr>
  </tfoot>
</table>

Answer 1

您可以使用tbody 的id 代替表id 来appendChild。使用表的id生成行并使用tbody追加Child

Live Demo

function insRow() {
    var x = document.getElementById('add-row');
    var x1 = document.getElementById('add-row1');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len;

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
    inp1.id += len;
    inp1.value = '';
    x1.appendChild(new_row);
}