JavaScript刪除核取方塊選中的表格行

螞蟻小編發表於2018-10-23
JavaScript

實際應用中可能有這樣的要求，點選可以刪除核取方塊已經選中的當前的表格行。

下面通過程式碼例項詳細介紹一下如何實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var obt=document.getElementById("btnDelete");
  var otb=document.getElementById("tb");
  var tbody=otb.getElementsByTagName("tbody")[0];  
  obt.onclick=function(){
    var cks=document.getElementsByName("del");
    for(var index=0;index<cks.length;index++){
      if(cks[index].checked==true){
        tbody.removeChild(cks[index].parentNode.parentNode);
      }
    }
  }
}
</script>
</head>
<body>
<table id="tb" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <th>姓名</th>
    <th>性別</th>
    <th>密碼</th>
    <th>地址</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="del" /></td>
    <td>張三</td>
    <td>男</td>
    <td>zhangsan</td>
    <td>上海</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="del"/></td>
    <td>李四</td>
    <td>男</td>
    <td>lisi</td>
    <td>安慶</td>
  </tr>
  <tr>
    <td colspan="5" align="center">
      <input type="button" id="btnDelete" value="刪除" />
    </td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求，選中核取方塊，然後再點選按鈕就可以刪除相應的行。

一.程式碼註釋：

（1）.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var obt=document.getElementById("btnDelete")，獲取刪除按鈕物件。

（3）.var otb=document.getElementById("tb")，獲取表格物件。

（4）.var tbody=otb.getElementsByTagName("tbody")[0]，獲取tbody物件。

（5）.obt.onclick=function(){}，為刪除按鈕註冊onclick事件處理函式。

（6）.var cks=document.getElementsByName("del")，獲取name屬性值為del餓元素集合。

（7）.for(var index=0;index<cks.length;index++)，使用for迴圈遍歷每一個集合中的每一個核取方塊。

（8）.if(cks[index].checked==true){tbody.removeChild(cks[index].parentNode.parentNode)}，如果核取方塊被選中，那麼就刪除核取方塊的父節點的父節點，也就是所在的行。不能夠用otb物件直接刪除行，因為js會自動為表格巢狀一層tbody元素，所以要使用tbody物件刪除。

二.相關閱讀：

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。 

（2）.removeChild()參閱JavaScript removeChild()一章節。 

（3）.parentNode參閱JavaScript parentNode一章節。

相關文章