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

Question

我有以下问题：我需要在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

Answer 1

当我在最后位置以外的任何地方插入一行时，这对我来说要好得多，

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

Answer 2

altCognito所说的，只是要注意一个大的innerHTML tbody错误 ，以防您想立即使用innerHTML替换所有内容，因为您要这样做很多，而DOM操作却太慢了。

Answer 3

IE使用innerHTML插入行时出现错误，因此将无法正常工作。 直接从马的嘴巴上： http : //www.ericvasilik.com/2006/07/code-karma.html

我建议只更新tbody，但将您的代码附加到新结构中。

Answer 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);

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

Answer 5

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

这是用来干嘛的？ 我认为您不需要它。 如果node.nextSibling为null，则没有关系。 您可以将其传递给insertBefore，其作用与appendChild相同。

无论如何，除了“ tr”外，tbody中没有其他元素。

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进行列表重击的次数较少），但实际上，通过我的测试，实际上并没有明显快得多。

另一种方法是insertAdjacentHTML，这是仅IE的扩展方法。 不幸的是，由于IE错误，您无法在tbody的子代上调用insertAdjacentHTML，就像您无法设置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速度的一半。 :-(

Answer 6

您需要将它们一个接一个地添加。

Answer 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);
  }
}