使用 javascript 将内容添加到表格行 ()？

Question

我有一个如下表：

<table>
 <tr>
   <td>col 1</td><td>col2</td>
 </tr>
 <tr id="insert">
   <td>field</td><td>Field 2</td>
 </tr>
 <tr>
   <td>another field</td><td>one more field</td>
 </tr>
</table>

现在的问题是我需要在中间行（id = insert）之后动态插入新行。我有一个自定义的 javascript 函数，可以通过对下一个元素使用 insertBefore 调用来在元素之后插入元素。

使用以下 javascript 成功创建新行：

var new_row = document.createElement('tr');
new_row.innerHTML="<td>test</td>";
insertAfter(document.getElementById("insert"), new_row);

但是，新行拒绝接受使用innerHTML 的任何简单 html 格式。新行的最终输出如下所示：

<tr>test</tr>

您会看到它不想输出我指定的内容。实际的脚本要复杂得多，因此不幸的是，使用appendChild或类似函数手动添加每个脚本将非常耗时，而且可能相当耗费资源。无论如何，我是否可以向该表行添加一个“html 块”，并在该块中定义表列？

我很困惑，非常感谢任何帮助。

Answer 1

您可以使用本机 insertCell() 方法插入单元格。

尝试一下：

示例： http://jsfiddle.net/VzTJa/

var new_row = document.createElement('tr');
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";

或者您也可以在没有 insertAfter() 函数的情况下使用 insertRow() 来完成此操作。

示例： http://jsfiddle.net/VzTJa/1/

var insert = document.getElementById("insert");
var new_row = insert.parentNode.insertRow( insert.rowIndex + 1 );
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";

---

给出尝试一下这个解决方法：

示例： http://jsfiddle.net/VzTJa/2/

var temp = '<table><tbody><tr>';
var close_temp = '</tr></tbody></table>';
var temp_div = document.createElement('div');


var html_to_insert = '<td>tester</td><td>tester</td>';

temp_div.innerHTML = temp + html_to_insert + close_temp;
insertAfter(document.getElementById("insert"), temp_div.firstChild.firstChild.firstChild);

temp_div.removeChild(temp_div.firstChild);

基本上创建了几个表示表格的开始和结束标记的字符串。您将它与您的内容连接起来，并将其设置为临时 div 的 innerHTMl，然后获取所需的行，并执行 .appendChild()< /代码>。

可能有更好的方法，或者你可能会找到一种方法来改进这个方法。

我在浏览这篇文章中的解决方案后想到了这个显然是在 IE 上工作并且部分负责解析器的家伙。

Answer 2

如果您可以使用 jQuery，请尝试其中的追加方法。 jQuery 附加参考

如果您确实发现性能是一个问题，您可能会通过构建您想要在 javascript 中添加动态 DOM，然后将其附加到实际的 HTML DOM 元素以使其可见。这将使您的重涂次数降至最低。