我正在尝试向 HTML 表中添加一些行，但它失败了答案

【问题标题】：I'm trying to add some rows to an HTML table, but it's failing我正在尝试向 HTML 表中添加一些行，但它失败了
【发布时间】：2011-08-25 14:17:20
【问题描述】：

注意：这是一个社区 wiki 帖子

以下代码使用简单的 dom 方法无法将行添加到表中。有什么问题？

<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
    var mytable = document.getElementById('mytable');

    var row = document.createElement('tr');
    var cell = document.createElement('td');
    var text = document.createTextNode('This is a row');

    cell.appendChild(text);
    row.appendChild(cell);
    mytable.appendChild(row);
}
</script>
</head>
<body>
<form action="#">

<table id="mytable">
<tr>
    <td>This is a row</td>
</tr>
</table>

<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>

【问题讨论】：

一个更深入的例子：stackoverflow.com/a/19561902/2536357

标签： javascript html dom html-table

【解决方案1】：

需要添加任何额外的行，然后获取 tableID 的第一个孩子，然后使用 appendChild() 方法：

var tbl=document.getElementById("tbl");
var row=document.createElement("tr");
var cel=document.createElement("td");
cel.innerHTML='sometext';
row.appendChild(cel);
tbl.children[0].appendChild(row);

【讨论】：

【解决方案2】：

这里的问题是<table> 元素的正确结构不存在。处理表格时，基本结构是：

<table>
<thead>
<tr>
  <th>Heading for the table</th>
</tr>
</thead>
<tbody>
  <tr>
    <td>A row of data</td>
  </tr>
</tbody>
</table>

逻辑是，在处理表格时，您希望将列的标签与实际数据分开。因为大多数浏览器填写<tbody>作为修复损坏的HTML过程的一部分，很少有人意识到这一点。当浏览器看到你添加了<tr>时，它不知道你是在尝试将它添加到<thead>还是<tbody>，所以它失败了。

以下显示了添加行的正确方法：

<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
    var mytbody = document.getElementById('mytbody');

    var row = document.createElement('tr');
    var cell = document.createElement('td');
    var text = document.createTextNode('This is a row');

    cell.appendChild(text);
    row.appendChild(cell);
    mytbody.appendChild(row);
}
</script>
</head>
<body>
<form action="#">

<table id="mytable">
<tbody id="mytbody">
<tr>
    <td>This is a row</td>
</tr>
</tbody>
</table>

<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>

【讨论】：

+1 被指控有罪。坦率地说，我几乎从不打扰表格中的 thead 和 tbody 标签。现在我会的。 :-)
需要指出的是tbody和thead实际上只在严格的XHTML中是必需的，而且基本上每个浏览器都支持insertCell and insertRow