deleteRow() 连续删除多行

最新推荐文章于 2024-01-29 15:14:48 发布

anqinganjie

最新推荐文章于 2024-01-29 15:14:48 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：数据库 python java

本文链接：https://blog.youkuaiyun.com/anqinganjie/article/details/84163348

js 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种在HTML表格中正确批量删除被选中复选框对应行的方法。通过从后往前遍历的方式，避免了因行删除导致的索引错乱问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用：删除表格选中的一行或多行。

html代码如下：

<table >
<tr>
<td >复选框</td>
<td >序号</td>
<td >代码</td>
<td >名称</td>
</tr>
<tbody id="mainBody">
<tr>
<td ><input type="checkbox" name="dms" value="D1" /></td>
<td >1</td>
<td >D1</td>
<td >名称1</td>
</tr>
<tr>
<td ><input type="checkbox" name="dms" value="D2" /></td>
<td >2</td>
<td >D2</td>
<td >名称2</td>
</tr>
<tr>
<td ><input type="checkbox" name="dms" value="D3" /></td>
<td >3</td>
<td >D3</td>
<td >名称3</td>
</tr>
<tr>
<td ><input type="checkbox" name="dms" value="D4" /></td>
<td >4</td>
<td >D4</td>
<td >名称4</td>
</tr>
</tbody>
</table>

需求是，点击删除时可以删除复选框选中的一行或者多行。一般情况下，第一直觉都是按照如下写法：

function onDelete() {
    var checks = document.getElementsByName("dms");
    var tbBody = document.getElementById("mainBody");
    for (var i=0; i<checks.length; i++) {
	    if (checks[i].checked) {   
	    	tbBody.deleteRow(i);
	    }
    }
}

这样写存在一个问题，当第一行被删除时，表格的结构发生了变化，以前的第i+1行变成了现在的第i行，所以按照这种写法无法遍历删除所以选中的行。

正确的写法应该是像下面这样，从最大的行号开始删除，这样第i+1行被删除后不会影响第i行在表格中的行号。

function onDelete() {
    var checks = document.getElementsByName("dms");
    var tbBody = document.getElementById("mainBody");
    for (var i=checks.length-1; i>=0; i--) {
	    if (checks[i].checked) {   
	    	tbBody.deleteRow(i);
	    }
    }
}