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

Question

使用 Javascript，我正在尝试在表格中间添加一个新表格行，其中新表格行是预先存在的行之一的副本。

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

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

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

我知道问题存在于传递给 insertBefore() 的最后一个变量中，就好像我将这个留空一样，代码会正确执行并将克隆的第一行插入到表的末尾（如果不存在第二个参数，它会起作用喜欢appendRow().

我收到错误“无法读取未定义的属性 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)) 工作正常！问题是我不想将它添加到表格的末尾。

Answer 1

混淆应该是由于您正在使用HTMLTableElement 接口（通过使用rows 属性） - 它抽象了表访问，因此即使存在中间隐式 tbody 元素也可以找到行-- 连同常规 DOM 方法 (insertBefore)，它期望引用节点是调用该方法的节点的直接子节点。

正如另一个答案中所指出的，您可以通过HTMLTableElement 接口使用insertRow 方法进行一致的表抽象。

但是，如果您想知道如何使用 vanilla DOM 方式进行操作，您可以通过了解假定的 tbody 来做到这一点：

var mainTable = document.getElementById('myTable');
var tbody = mainTable.children[0]; // or to use HTMLTableElement, mainTable.tBodies[0]

// Mixing HTMLTableElement with vanilla DOM
tbody.insertBefore(mainTable.rows[0].cloneNode(true), mainTable.rows[2]);

// or pure vanilla DOM:
// tbody.insertBefore(tbody.children[0].cloneNode(true), tbody.children[2]);

<table id="myTable">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

Answer 2

您可以计算表格行并使用表格原生方法动态插入行：

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

}

看看这个工作demo