javascript - 使用 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。接口(interface)(通过使用 rows 属性)——它抽象了表访问，因此即使存在中间的隐式 tbody 元素也可以找到行——连同常规 DOM 方法(insertBefore) 期望引用节点是调用该方法的节点的直接子节点。

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

但是，如果您想知道如何使用普通 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>