有没有办法添加原始html作为新的表格行与JavaScript？

比方说，我有如下表：有没有办法添加原始html作为新的表格行与JavaScript？

<table> 
    <tr id="1">...</tr> 
    <tr id="2">..</tr> 
    ... 
    <tr id="last">..</tr> 
</table>

我也有一个第三方服务从中我得到一些原始的HTML，也表行是这样的：

<tr id="additional-1">...</tr> 
<tr id="additional2">...</tr>

有一个相对简单的JavaScript方式来插入这些新行后的ID与“最后”的TR？

我想要简单的内置方法来避免必须做大量的解析，替换和东西。

我更喜欢YUI 3到jQuery解决方案。

来源

2012-07-13 Zlatko

是* *只是大概，当我读到最后一行发布一个jQuery的解决方案。让我知道你是否仍然喜欢它。 – ericosg 2012-07-13 10:42:45

@ericosg是的，我用jQuery很好，我只是说我更喜欢YUI :) – Zlatko 2012-07-13 10:56:59

将字符串包装在<table><tbody>..rows here...</tbody></table>中。然后，创建一个虚拟元素，例如<div>，并将innerHTML属性设置为先前构建的字符串。最后，遍历所有行，并使用insertBefore(newelem, reference)将行移动到表中。
此方法也适用于IE，在单元格上设置innerHTML属性会触发错误。

var raw_html, prev_element, last_element_parent, rows, i; 
raw_html = '<tr>....etc....</tr>'; 
prev_element = document.getElementById('last_element'); 
last_element_parent = prev_element.parentNode; 

dummy = document.createElement('div'); 
dummy.innerHTML = '<table><tbody>' + raw_html + '</tbody></table>'; 
rows = dummy.firstChild.rows; 

for (i=rows.length-1; i>=0; i--) { 
    last_element_parent.insertBefore(rows[i], prev_element.nextSibling); 
}

来源

2012-07-13 10:49:20

我最终使用你的解决方案。只有对于未来的读者，您可能可以在循环增量上添加更正。发生什么事是，当你移动第一个元素时，rows []数组会变小一个，所以它只能用于一半节点。 – Zlatko 2012-07-13 11:29:35

@zladuric Amended：我已经扭转了插入的顺序。这消除了将“当前”元素保存在临时变量中的步骤。 – 2012-07-13 11:58:31

什么是table.innerHTML += trs与var table存储table-Object和var trs存储额外的行。

来源

2012-07-13 10:43:23

不适用于旧版IE：http://msdn.microsoft.com/en-us/library/ie /ms533897(v=vs.85).aspx，“innerHTML属性在col，colGroup，frameSet，html，head，style，table，tBody，tFoot，tHead，title和tr对象上是只读的。” – 2012-07-13 10:49:53

也许它不适用于旧的IE，但我不需要那种支持。我认为这会做到。 – Zlatko 2012-07-13 10:57:43

@zladuric IE8包含在“旧IE”中。仍然有[相当数量的IE8用户]（http://gs.statcounter.com/#browser_version-ww-monthly-201106-201206），所以你不想使用一种在IE8中不起作用的方法。 – 2012-07-13 11:03:25

下面的代码应该工作

$("tr #last").after("ur raw html");

它的Jquery虽然。

来源

2012-07-13 10:47:18 Leg0

你没看过问题的最后一行，是吗？ – 2012-07-13 10:47:49

是啊哈，我没有更新我的答案:) – Leg0 2012-07-13 10:48:50

在YUI3你可以这样做：

Y.one('#last').insert(rawHTML, 'after');

来源

2012-07-13 13:38:28 juandopazo

我已经创建了一个js解决方案，但谢谢。 – Zlatko 2012-07-16 14:07:23

有没有办法添加原始html作为新的表格行与JavaScript？

回答

相关问题