我正在尝试向 HTML 表中添加一些行，但它失败了
Posted
技术标签:
【中文标题】我正在尝试向 HTML 表中添加一些行，但它失败了【英文标题】：I'm trying to add some rows to an HTML table, but it's failing 【发布时间】：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>
【问题讨论】：
一个更深入的例子：***.com/a/19561902/2536357 【参考方案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以上是关于我正在尝试向 HTML 表中添加一些行，但它失败了的主要内容，如果未能解决你的问题，请参考以下文章
SSIS 错误：尝试向数据流任务缓冲区添加行失败，错误代码为 0xC0047020
使用 tablesorter 和 pager 将行添加到表中