javascript
【2017-07-03】JS连续删除table中的选中的多行数据
deleteRow() 連續(xù)刪除多行
應(yīng)用:刪除表格選中的一行或多行。
html代碼如下:
<table >
<tr>
<td >復(fù)選框</td>
<td >序號(hào)</td>
<td >代碼</td>
<td >名稱(chēng)</td>
</tr>
<tbody id="mainBody">
<tr>
<td ><input type="checkbox" name="dms" value="D1" /></td>
<td >1</td>
<td >D1</td>
<td >名稱(chēng)1</td>
</tr>
<tr>
<td ><input type="checkbox" name="dms" value="D2" /></td>
<td >2</td>
<td >D2</td>
<td >名稱(chēng)2</td>
</tr>
<tr>
<td ><input type="checkbox" name="dms" value="D3" /></td>
<td >3</td>
<td >D3</td>
<td >名稱(chēng)3</td>
</tr>
<tr>
<td ><input type="checkbox" name="dms" value="D4" /></td>
<td >4</td>
<td >D4</td>
<td >名稱(chēng)4</td>
</tr>
</tbody>
</table>
需求是,點(diǎn)擊刪除時(shí)可以刪除復(fù)選框選中的一行或者多行。一般情況下,第一直覺(jué)都是按照如下寫(xiě)法:
Js代碼?
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);
}
}
}
這樣寫(xiě)存在一個(gè)問(wèn)題,當(dāng)?shù)谝恍斜粍h除時(shí),表格的結(jié)構(gòu)發(fā)生了變化,以前的第i+1行變成了現(xiàn)在的第i行,所以按照這種寫(xiě)法無(wú)法遍歷刪除所以選中的行。
正確的寫(xiě)法應(yīng)該是像下面這樣,從最大的行號(hào)開(kāi)始刪除,這樣第i+1行被刪除后不會(huì)影響第i行在表格中的行號(hào)。
Js代碼?
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);
}
}
}
?
轉(zhuǎn)載于:https://www.cnblogs.com/qq609113043/p/7109536.html
總結(jié)
以上是生活随笔為你收集整理的【2017-07-03】JS连续删除table中的选中的多行数据的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: FOC中的电流采样
- 下一篇: Spring基础知识及入门