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函数来插入elementsAFTER元素。

使用以下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'块，并在这个chunk中定义表列吗？

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

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);

基本上创建一对表示表的开始和结束标记的字符串。您将其与内容连接，并将其设置为临时innerHTMl的{{1}}，然后获取所需的行，并执行div。

可能有更好的方法，或者您可能找到改进此方法的方法。

我从一个显然在IE上工作并且对解析器负有部分责任的人在this article中查看解决方案后想出了这个。

Answer 2

如果你可以使用jQuery，请尝试使用它的append方法。 jQuery append reference

如果您确实发现性能存在问题，您可以通过在将其添加到实际HTML DOM元素之前构建要在javascript 中添加的动态DOM来实现改进。可见。这将使您的重绘次数降至最低。

使用javascript将内容添加到表格行（）？

2 个答案: