0

假设我有下表：

<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为“last”的tr之后插入这些新行？

我要求使用简单的内置方法来避免进行大量解析、替换和其他操作。

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

4

4 回答 4

2

存储表对象并table.innerHTML += trs存储附加行是什么意思。var tablevar trs

于 2012-07-13T10:43:23.460 回答
2

以下代码应该可以工作

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

它的 Jquery 虽然。

于 2012-07-13T10:47:18.753 回答
2

将字符串包裹在<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-13T10:49:20.623 回答
1

在 YUI3 中你可以这样做：

Y.one('#last').insert(rawHTML, 'after');
于 2012-07-13T13:38:28.863 回答