javascript - next sibling 的表问题

Question

我正在使用 insertRow 将 TR 元素插入表中，但由于某种原因，当我对其执行 nextSibling 时，它不会将插入的 TR 元素视为其他元素的同级元素。

例如，请考虑下表。

<table id="myTable">
    <tr id="row_0">
        <td colspan="3">Row 1</td>
    </tr>
    <tr id="tr_0_0">
        <td>Option 1</td>
        <td>Option2</td>
        <td>Option 3</td>
    </tr>
    <tr id="tr_0_1">
        <td>Option 1</td>
        <td>Option 2</td>
        <td>Option 3</td>
    </tr>
</table>

所以在我这样做之后:

var lTable = document.getElementById("myTable");
var trEle = lTable.insertRow(-1);
trEle.id = "tr_0_2";

var cell1 = trEle.insertCell(0);
cell1.innerHTML = "Option 1";

var cell2 = trEle.insertCell(1);
cell2.innerHTML = "Option 2";

var cell3 = trEle.insertCell(-1);
cell3.innerHTML = "Option 3";

然后我使用这种方法来获取所有 sibling ，但它永远不会给我这里的最后一个 sibling ，但前提是它是通过 insertRow 添加的，因为它可以很好地获取所有 nextSiblings ，但是一旦我通过添加 sibling insertRow 它从来没有给我最后一个 sibling ，arggggg....

var tempTr = document.getElementById("row_0");
var totalSibs = 0;

while(tempTr.nextSibling != null)
{

    var tempId = tempTr.id;

    // If no id, not an element, or not a tr_0 id.
    if (!tempId || tempTr.nodeType != 1 || tempId.indexOf("tr_0") != 0)
    {
        tempTr = tempTr.nextSibling;
        continue;
    }

    // This NEVER ALERTS the last id of the row that was inserted using insertRow, arggg.
    alert(tempId);

    totalSibs++;

    tempTr = tempTr.nextSibling;
}

因此，totalSibs 应该返回 3，因为在我插入行后，应该有 3 个 sibling ，但返回 2 并且从不计算第三个 sibling ......arggg。

有人可以帮我吗？

Answer 1

问题是在最后一次迭代中，您将 tempTr 设置为下一个同级(实际上是最后一个 tr)，但是您再次检查 nextSibling 在 while 条件中，在最后一种情况下它将是 null，完成循环。

将 while 条件更改为:

while (tempTr != null) {
  //...
}

或者简单地说:

while (tempTr) {
  //...
}

尝试您的代码 here .