如何在JavaScript的HTML表格主体中插入行

小编典典

如何在JavaScript的HTML表格主体中插入行

html

我有一个带有页眉和页脚的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？

阅读 440

2020-05-10

共1个答案

小编典典

如果您想在中添加行tbody，请获取对其的引用，然后在其中添加。

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

// Insert a row in the table at the last row
var newRow   = tableRef.insertRow();

// Insert a cell in the row at index 0
var newCell  = newRow.insertCell(0);

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

工作演示在这里。另外，您可以在insertRow此处查看文档。

2020-05-10