Javascript 在表的最后一行之前添加行到表中

Question

我的表代码是:

这是我的 JSfiddle

function insert_Row() {
  var xTable = document.getElementById('partsTable');
  var tr = document.createElement('tr');
  tr.innerHTML = "<td colspan=2><input type='text' name='parts[]' placeholder='part 1' class='form-control' > </td><td><input type='text' name='price[]' placeholder='price e.g 100' class='form-control' ></td>";
  xTable.appendChild(tr);
}

<table class="table table-bordered table-striped" id="partsTable">
  <thead>
    <tr class="bg-primary">
      <th colspan=2>Services</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan=2><input type='text' name="parts[]" placeholder="part 1" class='form-control'> </td>
      <td><input type='text' name="price[]" placeholder="price e.g 100" class='form-control'></td>
    </tr>
    <tr>
      <td colspan=3><button onclick="insert_Row();">+</button></td>

    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="col-md-6"> &nbsp </td>
      <td><strong>Total</strong></td>
      <td><strong>$1000.00</strong></td>
    </tr>
  </tfoot>
</table>

但它在tbody末尾添加了新的tr。我想在最后一个 tr 之前添加 tr 一个位置。这样可以吗？

Answer 1

有一个specific method用于在表中的指定索引处创建并插入行:

function insert_Row()
{
    var xTable = document.getElementById('partsTable');
    var index = xTable.rows.length - 1;
    var tr = xTable.insertRow(index);
    tr.innerHTML = "<td colspan=2><input type='text' name='parts[]' placeholder='part 1' class='form-control' > </td><td><input type='text' name='price[]' placeholder='price e.g 100' class='form-control' ></td>" ;
}