如何在 JavaScript 中的 HTML 表格正文中插入一行

小编典典

如何在 JavaScript 中的 HTML 表格正文中插入一行

all

我有一个带有页眉和页脚的 HTML 表格：

<table id="myTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaaa</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>My footer</td>
        </tr>
    <tfoot>
</table>

我正在尝试tbody使用以下内容添加一行：

myTable.insertRow(myTable.rows.length - 1);

但该行已添加到该tfoot部分中。

如何插入tbody？

阅读 60

2022-08-19

共1个答案

小编典典

如果要在中添加一行tbody，请获取对它的引用并调用其insertRow方法。

var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

// Insert a row at the end of table
var newRow = tbodyRef.insertRow();

// Insert a cell at the end of the row
var newCell = newRow.insertCell();

// Append a text node to the cell
var newText = document.createTextNode('new row');
newCell.appendChild(newText);


<table id="myTable">
  <thead>
    <tr>
      <th>My Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>initial row</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>My Footer</td>
    </tr>
  </tfoot>
</table>

（ JSFiddle 上的旧演示）

2022-08-19