Question

假设我有下表：

<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方法在tr之后插入id为“last”的新行？

我要求简单的内置方法，以避免进行大量的解析，替换和填充。

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

Answer 1

table.innerHTML += trs var table存储table-Object和var trs存储附加行的内容。

Answer 2

以下代码应该有效

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

它的Jquery虽然。

Answer 3

将字符串换行<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);
}

Answer 4

在YUI3中你可以这样做：

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

有没有办法用javascript添加原始html作为新表行？

4 个答案: