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

javascript html html-table insert row

2022-08-30 01:55:25

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

答案 1

如果要将行添加到中，请获取对该行的引用并调用其 insertRow 方法。tbody

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上的旧演示）

答案 2

您可以使用 jQuery 尝试以下代码段：

$(table).find('tbody').append("<tr><td>aaaa</td></tr>");