javascript - 动态添加行到表体

Question

我正在尝试将行添加到还具有页眉和页脚的现有表格。

这是我的代码:

<script>
function test() {
    var tbl = document.getElementById("tbl");
    var lastRow = tbl.rows.length - 1;
    var cols = tbl.rows[lastRow].cells.length;
    var row = tbl.insertRow(-1);
    for (var i = 0; i < cols; i++) {
        row.insertCell();
    }
}
</script>
<table id="tbl" onclick="test()">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

当我单击任何表格时，我想将新行添加到表格主体，但这里的问题是新行被添加到表格页脚。请帮我解决这个问题。

Answer 1

您将该行插入到 tBody 元素中。由于可以有多个tBody，您应该引用索引为0的表的tBodies属性。

var row = tbl.tBodies[0].insertRow(-1);

function test() {
  var tbl = document.getElementById("tbl");
  var lastRow = tbl.rows.length - 1;
  var cols = tbl.rows[lastRow].cells.length;
  var row = tbl.tBodies[0].insertRow(-1);
  for (var i = 0; i < cols; i++) {
    row.insertCell().appendChild(document.createTextNode(i));
  }
}

test();

<table id="tbl" onclick="test()">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>