Javascript 向表体动态添加行

我试图将行添加到既有表中，该表也有页眉和页脚

这是我的密码：

<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>

---

当我点击任何一个表时，我想在表体添加新行，但这里的问题是新行被添加到表尾。请帮助我如何解决此问题。

您可以将行插入tBody元素。因为可以有多个tBodies，所以应该参考索引0处表的tBodies属性

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

功能测试{ var tbl=document.getElementByIdtbl； var lastRow=tbl.rows.length-1； var cols=tbl.rows[lastRow].cells.length； var row=tbl.tBodies[0]。insertRow-1； 对于var i=0；i试试这样的。只需克隆第一行，然后将其作为子行附加到表中。希望对你有帮助

函数appendRow{ 设tbl=document.getElementByIdtbl； 设newRow=tbl.rows[0].cloneNodetrue； tbl.纽罗；