Question

我有一个HTML表格。第一行包含一个复选框。有一个与复选框更改相关联的javascript方法。如果选中该复选框，则代码会向表中添加几行并填充它们。如果取消选中该复选框，代码将删除除第一个行（包含复选框的行）之外的所有行。

代码的第一部分工作正常：行已正确添加。

我对第二部分有疑问。这是我的代码：

if (checkboxValue) {
    //Add first row
    var tr1 = document.createElement("tr");
    var td1_1 = document.createElement("td");
    ....
    tr1.appendChild(td1_1);
    var td1_2 = document.createElement("td");
    ...
    tr1.appendChild(td1_2);
    table.appendChild(tr1);

    //Add second row
    var tr2 = document.createElement("tr");
    var td2_1 = document.createElement("td");
    ...
    tr2.appendChild(td2_1);
    var td2_2 = document.createElement("td");
    ...
    tr2.appendChild(td2_2);
    table.appendChild(tr2);

} else {
    //Remove all rows but the first
    var rows = table.getElementsByTagName("tr");
    var nbrRows = rows.length;
    if (nbrRows > 1) {
        for (var i = 1; i < nbrRows; i++) {
            var row = rows[i];
            row.parentNode.removeChild(row);
        }
    }
}

问题始终来自rows[2]未定义。我不知道为什么！

如果不是使用removeChild，而是编写row.innerHTML = ""，我会看到我正在寻找的视觉效果（所有行都消失了），但这是不优雅的，因为该表现在包含几个空行（每次检查/取消选中复选框时，它们的数量都会增加。）

一个线索？非常感谢你的时间！

Answer 1

不要使用for循环删除这样的DOM元素。问题是rows是live collection，这意味着每次从DOM中删除元素时它都会更新。结果，i计数器转移，最终您点击了＃34; undefined＆＃34;元素点。

相反，请使用while循环。例如，要删除除第一行之外的所有行：

var rows = table.getElementsByTagName("tr");
while (rows.length > 1) {
    rows[1].parentNode.removeChild(rows[1]);
}

另请注意，它getElementsByTagName没有s。

<强> UPD 即可。如果您更喜欢for循环，请向后迭代：

var rows = table.getElementsByTagName("tr");
for (var i = rows.length - 1; i > 0; i--) {
    rows[i].parentNode.removeChild(rows[i]);    
}

演示： https://jsfiddle.net/9y03co6w/

Answer 2

从正在迭代的数组中删除一行。这总是一个坏主意，可能是你错误的原因。

解决方案：从结束而不是从头开始迭代。

还可以看到例如：example

Answer 3

尝试替换此行

var rows = table.getElementsByTagNames("tr");

通过

var rows = table.find("tr");

删除所有子节点，但第一个

3 个答案: