表的nextSibling问题

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

然后我使用这种方法来获取所有的兄弟，但它永远不会给我这里的最后一个兄弟，除非它是通过insertRow添加的，因为它可以很好地获取所有的nextSiblings，但是一旦我通过insertRow添加了一个兄弟，它就永远不会给我最后一个兄弟，argggg……

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个兄弟，但是却返回了2，并且从不计算第三个兄弟。阿格。

有人能帮帮我吗？

Answer 1

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

将while条件更改为：

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

或者简单地说：

while (tempTr) {
  //...
}

试试你的代码here。