使用Javascript将表行添加到表的中间

使用Javascript，我试图将一个新表行添加到表的中间，其中新表行是一个预先存在的行的副本

在stackoverflow上有很多类似的问题，但似乎没有一个能帮助我解决这个问题

function AddRow()
{
    var mainTable = document.getElementById('mainTable');

    mainTable.insertBefore(
        mainTable.rows[0].cloneNode(true),
        mainTable.rows.childNodes[2]);
}

我知道传递给insertBefore（）的最后一个变量中存在问题，如果我将此变量留空，代码将正确执行并在表的末尾插入克隆的第一行（如果不存在第二个参数，则其行为类似于

appendRow（）。

我得到错误“无法读取undefined的属性2”，我想这意味着它无法将mainTable.rows.childNodes识别为要索引的有效对象

我还尝试了以下方法，并在测试时得到了更难以捉摸的错误“NotFoundError:DOM Exception 8”

function AddRow()
{
    var mainTable = document.getElementById('mainTable');

    mainTable.insertBefore(
        mainTable.rows[0].cloneNode(true),
        mainTable.rows[2]);
}

---

编辑：注意

mainTable.appendChild（mainTable.rows[0].cloneNode（true））

工作正常！问题是我不想将其添加到表的末尾。

您可以计算表行并使用表本机方法以友好方式插入行：

function appendRow(){
var table = document.getElementById('myTable');
var middleRow = table.insertRow( Math.floor( table.rows.length / 2 ) );
var cell1 = middleRow.insertCell(0);
var textnode1=document.createTextNode('dom insterted');
cell1.appendChild( textnode1 );
}

function cloneRow(){
var table = document.getElementById('myTable');
var row = document.getElementById("rowToClone"); // find row to clone
var clonedRow = row.cloneNode(true); 
clonedRow.id = "newID"; // change id or other attributes/contents
//table.appendChild(clonedRow); // add new row to end of table
var middleRow = table.insertRow( Math.floor( table.rows.length / 2 ) );
var cell1 = middleRow.insertCell(0);    
 cell1.appendChild( clonedRow );   

}

---

检查一下这个工作

混乱应该是因为您正在使用接口（通过使用

rows

属性）——它抽象了表访问，因此可以找到行，即使中间有一个隐式tbody元素——以及常规DOM方法（

insertBefore

）它期望引用节点是调用该方法的节点的直接子节点

正如在另一个答案中指出的，您可以通过

HTMLTableElement

接口使用

insertRow

方法进行一致的表抽象

但是，如果您想知道如何使用vanilla DOM方式，可以通过了解假定的tbody来实现：

var mainTable=document.getElementById（'myTable'）；
var tbody=mainTable.children[0]；//或要使用HTMLTableElement，mainTable.tBodies[0]
//混合HTMLTableElement和香草DOM
tbody.insertBefore（mainTable.rows[0].cloneNode（true），mainTable.rows[2]）；
//或纯香草DOM：
//tbody.insertBefore（tbody.children[0].cloneNode（true），tbody.children[2]）；

1.
2.
3.
4.
5.
6.

表可能不是行的父元素（可能是tbody），如果不是，这对我的代码有什么影响？我不明白为什么它是子元素或者说是孙子元素会很重要。

insertBefore

假定引用值是直接的子元素。您的代码会在表中插入一个新的空行（然后使用

createTextNode（）

）填充内容），但是我如何将HTML内容从一个预先存在的行复制到这个新的空白行中呢？这就是我尝试使用

insertBefore（）的原因

方法，因为它将现有的行对象作为输入。感谢您的帮助。不过，我接受了@BrettZamir的答案，因为他提供了最适合问题的解决方案。此外，您的答案类似于“单元格”而不是行。例如，如果您在表中添加另一列，您的克隆Javascript会将这两列连接到单个单元格中。谢谢，这非常有效！隐藏的tBody就是我的灵感所在。总有一天，我会通过insertRow（）以一致的表抽象更干净地完成这项工作。