首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

deleteRow() 延续删除多行

2012-06-29 
deleteRow() 连续删除多行? ? 应用:删除表格选中的一行或多行。html代码如下:?table trtd 复选框/td

deleteRow() 连续删除多行

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

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);    }    }}
?

?

热点排行