在javascript中使用复选框删除HTML表中的多行

我无法删除选定的行。 我想删除选中复选框的行。但我无法访问表行并检查复选框是否已选中。我该怎么办

代码：

名字
姓
年龄
编辑
A1
地下一层
10
A3
地下三层
30
A2
地下二层
20
去除
函数deleteRow（）{
var table=document.getElementById（“表格”）；
var rowCount=table.rows.length；
log（“rowcount:+rowcount”）；
对于（变量i=1；i

删除行的方式是错误的，因为您使用具有预缓存长度的

for

循环，但是当一行（例如

i

）被删除时，该行

i+1

将变为

i

，并且长度会发生变化

解决此问题的正确方法是使用

while

循环，而不缓存行数，并且仅在不删除行时增加索引

示例：

函数deleteRow（）{
/*缓存表*/
var table=document.getElementById（“表格”）；
/*创建循环中使用的索引*/
var指数=1；
/*只要索引小于行数，就重复此操作*/
while（索引<表.行.长度）{
/*获取单元格的输入*/
var input=table.rows[index]。单元格[0]。子项[0]；
/*检查输入是否存在并已检查*/
如果（输入和输入。选中）{
/*删除当前索引处的行*/
表.删除行（索引）；
}
否则{
/*增加索引*/
索引++；
}
}
}

名字
姓
年龄
编辑
A1
地下一层
10
A3
地下三层
30
A2
地下二层
20
删除
使用
queryselectoral（）
和
：checked
选中所有选中复选框

parentNode.parentNode
用于获取父节点
tr
node


函数deleteRow（）{
document.querySelectorAll（“#table.select:checked”）.forEach（e=>{
e、 parentNode.parentNode.remove（）
});
}

名字
姓
年龄
编辑
A1
地下一层
10
A3
地下三层
30
A2
地下二层
20
删除
您的代码的问题是，删除一行后，所有后续行的索引立即减少一，因为
HTMLTableElement.prototype.rows
返回一个live
HTMLCollection

这不仅会导致循环执行过于频繁（因为缓存了
table.rows.length
），还会导致后续索引不再匹配

我建议使用可读性更高的
for…of
循环，这只会稍微复杂一些，因为表似乎不允许使用
表。removeChild（行）
：


函数deleteRow（）{
const table=document.getElementById（“表”）；
对于[…table.rows].entries（）的（常量[索引，行]）{
if（row.querySelector（'input:checked'））{
表.删除行（索引）；
}
}
}

名字
姓
年龄
编辑
A1
地下一层
10
A3
地下三层
30
A2
地下二层
20
Remove
“一种解决问题的正确方法…”是的，但是从末尾删除行会更容易，因为这样索引将始终是正确的，而不需要额外的“魔力”（
，for（let i=table.rows.length-1；i>=0；i--）{…}
）：）添加一些关于to方法不起作用的信息将使这一答案变得更好。现在TO有了一个有效的解决方案，但不知道为什么他的方法没有如预期的那样有效。