使用javascript将内容添加到表格行（< TR>）？ [英] Adding content to a table row (<TR>) with javascript?

问题描述

我有一张表如下：

<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元素。

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.

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

The new rows create successfully using the following javascript:

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

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

However, the new row refuses to accept any simple html formatting using the innerHTML. The final output of the new row looks something like:

<tr>test</tr>

你看到它不想输出我指定的。实际的脚本更复杂，所以不幸的是手动添加每个使用appendChild或类似功能的脚本会耗费太多时间，也可能是资源密集型的。有没有办法我可以添加一个大块HTML到这个表行，在这个块定义表列？

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?

我很困惑，任何帮助是很多

I'm baffled, any help is MUCH appreciated.

推荐答案

您可以使用本机 insertCell（）插入单元格。

You can use the native insertCell() method to insert cells.

尝试一下：

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

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

或者您可以在没有您的 insertAfter（）函数通过使用 insertRow（）。

or you can accomplish it without your insertAfter() function by using insertRow() as well.

示例： 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:

示例： 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（）。

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 innerHTMl of a temporary div, then fetch the row you want, and do an .appendChild().

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

There may be a better way, or you may find a way to improve this one.

我想到了这一点，在看了一个解决方案这篇文章来自一个显然在IE上工作的人，并且负责解析器。

I came up with this after glancing at a solution in this article from a guy who apparently worked on IE and is partly responsible for the parser.

这篇关于使用javascript将内容添加到表格行（< TR>）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！