js動態新增和刪除table表格行程式碼例項

admin發表於2017-03-24
JS行程

本章節通過例項程式碼詳細介紹一下如何給一個table表格動態的新增或者刪除行。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
var mailArr=[{ "title": "關於css程式碼", "name": "螞蟻部落", "date": "2014-05-11" }, 
{ "title": "js的dom物件", "name": "亂碼", "date": "2014-03-06" }, 
{ "title": "jquery的this", "name": "煙雨", "date": "2014-02-21" }, 
{ "title": "情感問題", "name": "caicai", "date": "2014-06-08" } 
]; 
var tab=null; 
window.onload=function(){ 
  loadTab(); 
  document.getElementById("selA").onclick=function(){ 
    if(document.getElementById("selA").checked==true){ 
      seleAll(tab, true); 
    } 
    else{ 
      seleAll(tab, false); 
    } 
  }; 
  document.getElementById("delSel").onclick=function(){ 
    var chks = document.getElementsByTagName('input'); 
    for(var i=chks.length-2;i>=0;i--){ 
      var chk=chks[i]; 
      if(chk.checked==true){ 
        var rowNow=chk.parentNode.parentNode; 
        rowNow.parentNode.removeChild(rowNow); 
      } 
    } 
  }; 
};
function loadTab(){ 
  tab=document.getElementById("tb"); 
  for(var rowindex=0;rowindex<mailArr.length;rowindex++){ 
    var tr=tab.insertRow(tab.rows.length-1);
    var td1=tr.insertCell(-1); 
    td1.innerHTML="<input type='checkbox'/>"; 
    var td2=tr.insertCell(-1); 
    td2.innerHTML=mailArr[rowindex].title; 
    var td3=tr.insertCell(-1); 
    td3.innerHTML=mailArr[rowindex].name; 
    var td4=tr.insertCell(-1); 
    td4.innerHTML=mailArr[rowindex].date; 
  } 
}
function seleAll(mailTab,isSel){ 
  for (var i=0;i< mailTab.rows.length;i++){ 
    var tr=mailTab.rows; 
    tr.cells[0].childNodes[0].checked=isSel; 
  } 
} 
</script>
</head>
<body>
<table id="tb" border="1" style="border-collapse: collapse;">
  <tr>
    <th>序列</th>
    <th>標題</th>
    <th>發郵人</th>
    <th>發件時間</th>
  </tr>
  <tr>
    <td colspan="4">
      <input id="selA" type="checkbox" />
      <label for="selA">全選</label>
      <a href="#" id="delSel">刪除</a>
    </td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了動態新增和刪除表格行的效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.var mailArr=[{}]，宣告一個陣列，元素是物件直接量，每一個物件直接量儲存有一行的資訊。

2.var tab=null;，宣告一個變數賦初值為null，用來儲存表格物件的引用。

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

4.loadTab()，動態為表格新增行。

5.document.getElementById("selA").onclick=function(){}，為全選核取方塊註冊事件處理函式。

6.if(document.getElementById("selA").checked==true){seleAll(tab, true);}，判斷全選按鈕是否被選中。

7.seleAll(tab, true)，如果全選按鈕被選中，那麼就呼叫此函式，將行前面的核取方塊選中。

8.else{ seleAll(tab, false); } ，否則取消所有行前面核取方塊的選中。

9.document.getElementById("delSel").onclick=function(){}，為刪除按鈕註冊事件處理函式，這裡把連結作為一個按鈕使用。

10.var chks = document.getElementsByTagName('input')，獲取所有的核取方塊。

11.for(var i=chks.length-2;i>=0;i--)，遍歷除了最後一個核取方塊之外的所有核取方塊。

12.var chk=chks，獲取指定索引的核取方塊。

13.if(chk.checked==true)，判斷是否被選中。

14.var rowNow=chk.parentNode.parentNode，獲取當前核取方塊的父元素的父元素，也就是它所在的行。

15.rowNow.parentNode.removeChild(rowNow)，刪除當前行。

16.function loadTab(){}，此函式可以初始化表格，也就是動態新增表格的行。

17.tab=document.getElementById("tb")，獲取表格行物件。

18.for(var rowindex=0;rowindex<mailArr.length;rowindex++){}，遍歷陣列中的每一個元素。

19.var tr=tab.insertRow(tab.rows.length-1)，在表格中插入一行，插入位置是最後一行的前面。

20. var td1=tr.insertCell(-1)，在單元格的最後新增一個新的單元格。

21.td1.innerHTML="<input type='checkbox'/>"，設定單元格中的內容。

22.var td2=tr.insertCell(-1)，再插入一個單元格。

23.td2.innerHTML=mailArr[rowindex].title，將單元格的內容設定為對應的標題。

24.function seleAll(mailTab,isSel){}，此函式可以設定核取方塊全選和全不選，第一個引數是表格物件，第二個是布林值，如果為true，則核取方塊全選，否則全不選。

25.for (var i=0;i< mailTab.rows.length;i++)，遍歷表格中的每一個行。

26.var tr=mailTab.rows,獲取一個行。

27.tr.cells[0].childNodes[0].checked=isSel，設定核取方塊是否選中。

二.相關閱讀:

1.checked屬性可以參閱javascript checkbox.checked一章節。 

2.getElementsByTagName()函式可以參閱document.getElementsByTagName()一章節。 

3.parentNode()函式可以參閱parentNode一章節。 

4.removeChild()函式可以參閱javascript removeChild()一章節。

5.insertRow()函式可以參閱js insertRow()一章節。  

6.insertCell()函式可以參閱js insertCell()一章節。 

7.cells屬性可以參閱javascript table cells一章節。 

8.children屬性可以參閱javascript children一章節。

相關文章