【2017-07-03】JS連續刪除table中的選中的多行數據


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>
需求是,點擊刪除時可以刪除復選框選中的一行或者多行。一般情況下,第一直覺都是按照如下寫法:


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);
}
}
}
這樣寫存在一個問題,當第一行被刪除時,表格的結構發生了變化,以前的第i+1行變成了現在的第i行,所以按照這種寫法無法遍歷刪除所以選中的行。

正確的寫法應該是像下面這樣,從最大的行號開始刪除,這樣第i+1行被刪除后不會影響第i行在表格中的行號。

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM