Javascript 使用javascript将内容添加到表格行（<TR>）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4789923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding content to a table row (<TR>) with javascript?
提问by Michael D
I have a table as follows:
我有一个表如下：
<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>
Now the issue is that I need to dynamically insert new rows AFTER the middle row (id = insert). I have a custom javascript function to insert elementsAFTER an element by using an insertBefore call on the next element.
现在的问题是我需要在中间行（id = insert）之后动态插入新行。我有一个自定义的 javascript 函数，可以通过对下一个元素使用 insertBefore 调用来在元素之后插入元素。
The new rows create successfully using the following javascript:
使用以下 javascript 成功创建新行：
var new_row = document.createElement('tr');
new_row.innerHTML="<td>test</td>";
insertAfter(document.getElementById("insert"), new_row);
However, the new row refuses to accept any simple html formatting using the innerHTML. The final output of the new row looks something like:
但是，新行拒绝接受任何使用 innerHTML 的简单 html 格式。新行的最终输出类似于：
<tr>test</tr>
You see it doesn't want to output the I have specified. The actual script is a lot more complex and so unfortunately manually adding each using an appendChild or similar function would be far too time consuming and probably rather resource intensive. Is there anyway I can just add a 'chunk of html' to this table row and in this chunk define the table columns?
你看它不想输出我指定的。实际的脚本要复杂得多，因此不幸的是，使用 appendChild 或类似函数手动添加每个脚本会非常耗时，而且可能会占用大量资源。无论如何我可以在这个表格行中添加一个“html块”，并在这个块中定义表格列？
I'm baffled, any help is MUCH appreciated.
我很困惑，非常感谢任何帮助。
回答by user113716
You can use the native insertCell()method to insert cells.
您可以使用本机insertCell()方法插入单元格。
Give this a try:
试试这个：
Example:http://jsfiddle.net/VzTJa/
示例：http : //jsfiddle.net/VzTJa/
var new_row = document.createElement('tr');
new_row.insertCell(0).innerHTML = "test";
new_row.insertCell(1).innerHTML = "test2";
or you can accomplish it without your insertAfter()function by using insertRow()as well.
或者你也可以在没有你的insertAfter()函数的情况下完成它insertRow()。
Example:http://jsfiddle.net/VzTJa/1/
示例：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";
Give this workaround a try:
试试这个解决方法：
Example:http://jsfiddle.net/VzTJa/2/
示例：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);
Basically creates a couple strings representing the opening and closing tags of a table. You concatenate it with your content, and set it as the innerHTMlof a temporary div, then fetch the row you want, and do an .appendChild().
基本上创建了几个字符串来表示表格的开始和结束标记。您将它与您的内容连接起来，并将其设置为innerHTMl临时的div，然后获取您想要的行，并执行.appendChild().
There may be a better way, or you may find a way to improve this one.
可能有更好的方法，或者您可能会找到改进此方法的方法。
I came up with this after glancing at a solution in this articlefrom a guy who apparently worked on IE and is partly responsible for the parser.
在浏览了这篇文章中一个显然在 IE 上工作并且对解析器负有部分责任的人的解决方案后，我想出了这个。
回答by nybbler
If you can use jQuery, try the append method from it. jQuery append reference
如果您可以使用 jQuery，请尝试使用它的 append 方法。jQuery 附加参考
If you do find performance to be an issue, you might find an improvement by building up the dynamic DOM you want to add in javascript beforeappending it to the actual HTML DOM element that will make it visible. This will keep your number of repaints to a minimum.
如果您确实发现性能是一个问题，您可能会发现通过在将动态 DOM附加到使其可见的实际 HTML DOM 元素之前构建要添加到 javascript 中的动态 DOM 来改进。这将使您的重绘次数保持在最低限度。
