JavaScript刪除table表格指定行

antzone發表於2017-04-04

在實際應用中,可能要刪除指定表格的指定行,下面介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
function deleteRow(r){
  var i=r.parentNode.parentNode.rowIndex;
  document.getElementById('myTable').deleteRow(i);
}
window.onload=function(){
  var bts=document.getElementsByTagName("input");
  for(var index=0;index<bts.length;index++){
    bts[index].onclick=function(){
      deleteRow(this);
    }
  }
}
</script>
</head>
<body>
<table id="myTable" border="1">
  <tr>  
    <td>螞蟻部落一</td>
    <td><input type="button" value="刪除行"/></td>
  </tr>
  <tr>  
    <td>螞蟻部落二</td>
    <td><input type="button" value="刪除行"/></td>
  </tr>
  <tr>  
    <td>螞蟻部落三</td>
    <td><input type="button" value="刪除行"/></td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。

一.程式碼註釋:

(1).function deleteRow(r){},此函式能夠刪除指定的行,r引數是按鈕物件。

(2).var i=r.parentNode.parentNode.rowIndex,r.parentNode可以獲取td物件,r.parentNode.parentNode可以獲取tr物件,rowIndex獲取的是tr行的索引值。

(3).document.getElementById('myTable').deleteRow(i),刪除指定索引的行。

(4).var bts=document.getElementsByTagName("input"),獲取input元素集合,當然這裡就是按鈕物件集合。

(5).for(var index=0;index<bts.length;index++){

  bts[index].onclick=function(){

    deleteRow(this);

  }

},批量為按鈕註冊事件處理函式。

二.相關閱讀:

(1).parentNode屬性參閱JavaScript parentNode一章節。

(2).rowIndex屬性參閱JavaScript rowIndex一章節。

(3).deleteRow()方法參閱JavaScript deleteRow()一章節。

相關文章