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

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>

Answer 2

尝试这样的事情。只需克隆第一行，然后将其作为子项附加到表中。希望它能帮到你

＆＃13;

 function appendRow() {
    let tbl = document.getElementById("tbl");
    let newRow = tbl.rows[0].cloneNode(true);
    tbl.appendChild(newRow);

＆＃13;

动态地向表体添加行

2 个答案: