如何在纯JS中的一行之后插入一组表行答案

【问题标题】：How to insert a a set of table rows after a row in pure JS如何在纯JS中的一行之后插入一组表行
【发布时间】：2010-10-19 16:41:02
【问题描述】：

我有以下问题：我需要在 X 行之后插入 N 行。我需要插入的行集作为由 TR 元素组成的 HTML 块传递给我的函数。我还可以访问我需要插入的 TR。

这与我之前用另一个 TBODY 替换 TBODY 所做的略有不同。

我遇到的问题是appendChild 需要一个元素，但我必须插入一个集合。

编辑：

这里是解决方案：

function appendRows(node, html){ 
    var temp = document.createElement("div");
    var tbody = node.parentNode;
    var nextSib = node.nextSibling;

    temp.innerHTML = "<table><tbody>"+html;
    var rows = temp.firstChild.firstChild.childNodes;

    while(rows.length){
        tbody.insertBefore(rows[i], nextSib);
    }
}

查看实际情况：

http://programmingdrunk.com/test.htm

【问题讨论】：

标签： javascript dom html-table

【解决方案1】：

if(node.nextSibling && node.nextSibling.nodeName.toLowerCase() === "tr")

这是干什么用的？我不认为你需要它。如果 node.nextSibling 为空，那没关系。您可以将其传递给 insertBefore，它的作用与 appendChild 相同。

在 tbody 中除了“tr”之外没有其他元素被允许。

for(var i = 0; i < rows.length; i++){
    tbody.insertBefore(rows[i], node.nextSibling);

这不适用于多行。一旦你完成了一次 insertBefore，node.nextSibling 现在将指向你刚刚插入的行；您最终会以相反的顺序插入所有行。您需要记住原来的 nextSibling。

ETA：另外，如果“rows”是一个活动的 DOM NodeList，每次你将其中一行插入新的主体时，它都会从旧的主体中删除它！因此，您在迭代列表时正在破坏列表。这是“每隔一个”错误的常见原因：您处理列表的第 0 项，然后将其从列表中删除，将第 1 项向下移动到第 0 项所在的位置。接下来访问新的项目 1，即原始项目 2，而原始项目 1 永远不会被看到。

要么在普通的非实时“数组”中复制列表，或者，如果您知道它将是一个实时列表，您实际上可以使用更简单的循环形式：

var parent= node.parentNode;
var next= node.nextSibling;
while (rows.length!=0)
    parent.insertBefore(rows[0], next);

我必须插入一个集合。

通常当您考虑一次插入一组元素时，您希望使用 DocumentFragment。但是，不幸的是，您不能在 DocumentFragment 上设置“innerHTML”，因此您必须像上面那样在表格上设置行，然后将它们一一移动到 DocumentFragment 中，然后在 documentFragment 之前插入。虽然理论上这可能比附加到最终目标表中更快（由于更少的 childNodes list-bashing），但在实践中，通过我的测试，它实际上并没有明显更快。

另一种方法是 insertAdjacentHTML，这是一种仅限 IE 的扩展方法。不幸的是，您不能在 tbody 的子级上调用 insertAdjacentHTML，就像由于 IE 错误而无法设置 tbody.innerHTML 一样。您可以在 DocumentFragment 中设置它：

var frag= document.createDocumentFragment();
var div= document.createElement(div);
frag.appendChild(div);
div.insertAdjacentHTML('afterEnd', html);
frag.removeChild(div);
node.parentNode.insertBefore(frag, node.nextSibling);

不幸的是，由于某种神秘的原因，insertAdjacentHTML 在这种情况下工作得非常缓慢。上面的方法对我来说大约是一对一 insertBefore 的一半速度。 :-(

【讨论】：

感谢您指出第一部分。我删除了丑陋的 IF，一切都还好。我还注意到 nextSibling 问题。我现在正在处理的是代码似乎由于某种原因每隔一行插入一次。我想举个例子。
出于某种原因，我发布了一个插入每隔一行的函数的演示：programmingdrunk.com/test.htm
是的，做到了。非常感谢，这是我在这里得到的最好的答案/帮助。

【解决方案2】：

正如 altCognito 所说，请注意 big innerHTML tbody bug，以防您想使用 innerHTML 一次性替换所有内容，因为您做了很多这样的事情，而且 DOM 操作变得太慢了。

【讨论】：

我不能一次更换所有东西，因为那样我需要更换 tbody，我不能这样做。你知道有什么方法可以用 innerHTML 替换一些行并留下其他行吗？

【解决方案3】：

IE 使用 innerHTML 插入行时出错，因此无法正常工作。直奔马口：http://www.ericvasilik.com/2006/07/code-karma.html

我建议只更新 tbody，但将代码附加到新结构中它所属的位置。

【讨论】：

【解决方案4】：

使用您的表格对象，您可以在其中插入一个新行。

var tbl = document.getElementById(tableBodyId); 
var lastRow = tbl.rows.length; 
// if there's no header row in the table, then iteration = lastRow + 1 
var iteration = lastRow; 
var row = tbl.insertRow(lastRow);

它将在表格末尾插入一行。

【讨论】：

【解决方案5】：

在除最后一个位置以外的任何位置插入一行时，这对我来说效果更好，

var rowNode = refTable.insertRow(0); var cellNode = rowNode.insertCell();

【讨论】：

【解决方案6】：

您需要一一追加。

【讨论】：

【解决方案7】：

您需要确定第 X 行是否是最后一行...

//determine if lastRow...
//if not, determine row_after_row_x
for(i in n_rows){
  if(lastRow){
    tbodyObj.appendChild(row_i_of_n);
  } else {
    tbodyObj.insertBefore(row_i_of_n, row_after_row_x);
  }
}

【讨论】：

谢谢，我要试试。我实际上非常接近，只是想弄清楚要在哪个对象上调用 .insertBefore。希望这会奏效