删除所有子节点,但第一个
Remove all child nodes but the first one
我有一个 HTML table。第一行包含一个复选框。有一个 javascript 方法与复选框更改相关联。如果选中该复选框,代码将向 table 添加几行并填充它们。如果未选中该复选框,代码将删除除第一行(包含该复选框的行)之外的所有行。
代码的第一部分工作正常:行已正确添加。
我对第二部分有疑问。这是我的代码:
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 = ""
,我就有了我正在寻找的视觉效果(所有行都消失了),但这并不优雅,因为 table 现在包含几个空行(每次我 check/uncheck 复选框时它们的数量都会增加)。
线索?非常感谢您的宝贵时间!
您从正在迭代的数组中删除了一行。这总是一个坏主意,并且可能是您出错的原因。
解决方案:从末尾而不是从头开始迭代。
另见示例:example
尝试替换这一行
var rows = table.getElementsByTagNames("tr");
来自
var rows = table.find("tr");
不要使用 for 循环删除这样的 DOM 元素。问题是 rows
是 live collection,这意味着每次从 DOM 中删除元素时它都会更新。结果,i
反击 移位 ,最终你击中了 "undefined" 元素点。
而是使用 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]);
}
我有一个 HTML table。第一行包含一个复选框。有一个 javascript 方法与复选框更改相关联。如果选中该复选框,代码将向 table 添加几行并填充它们。如果未选中该复选框,代码将删除除第一行(包含该复选框的行)之外的所有行。
代码的第一部分工作正常:行已正确添加。
我对第二部分有疑问。这是我的代码:
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 = ""
,我就有了我正在寻找的视觉效果(所有行都消失了),但这并不优雅,因为 table 现在包含几个空行(每次我 check/uncheck 复选框时它们的数量都会增加)。
线索?非常感谢您的宝贵时间!
您从正在迭代的数组中删除了一行。这总是一个坏主意,并且可能是您出错的原因。
解决方案:从末尾而不是从头开始迭代。
另见示例:example
尝试替换这一行
var rows = table.getElementsByTagNames("tr");
来自
var rows = table.find("tr");
不要使用 for 循环删除这样的 DOM 元素。问题是 rows
是 live collection,这意味着每次从 DOM 中删除元素时它都会更新。结果,i
反击 移位 ,最终你击中了 "undefined" 元素点。
而是使用 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]);
}