有沒有辦法添加原始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？

回答

相關問題