JavaScript中動態(tài)向表格添加數據

更新時間：2017年01月24日 09:50:31 作者：ChauncyWu

本文給大家分享使用原生javascript實現(xiàn)動態(tài)向表格中添加數據的方法，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧

利用JavaScript ，動態(tài)向表格中添加數據，其實方法很簡單的，下面給大家分享下實現(xiàn)方法

1. 首先先寫出表格的表頭和主干部分

<table width="600" border="1" cellspacing="0"> 
  <thead> 
   <tr> 
     <th>編號</th> 
     <th>姓名</th> 
     <th>職位</th> 
     <th>操作</th> 
   </tr>  
  </thead> 
  <tbody id="tbMain"></tbody> 
</table>

2. 接下來就是網表格里面添加數據，這里用的是原生javascript

<script type="text/javascript"> 
 //模擬一段JSON數據，實際要從數據庫中讀取 
 var per = [ 
      {id:001,name:'張珊',job:'學生'}, 
      {id:002,name:'李斯',job:'教師'}, 
      {id:003,name:'王武',job:'經理'} 
      ];  
 window.onload = function(){ 
   var tbody = document.getElementById('tbMain'); 
   for(var i = 0;i < per.length; i++){ //遍歷一下json數據 
     var trow = getDataRow(per[i]); //定義一個方法,返回tr數據 
     tbody.appendChild(trow); 
    } 
   } 
 function getDataRow(h){ 
   var row = document.createElement('tr'); //創(chuàng)建行 
   var idCell = document.createElement('td'); //創(chuàng)建第一列id 
   idCell.innerHTML = h.id; //填充數據 
   row.appendChild(idCell); //加入行 ，下面類似 
   var nameCell = document.createElement('td');//創(chuàng)建第二列name 
   nameCell.innerHTML = h.name; 
   row.appendChild(nameCell); 
   var jobCell = document.createElement('td');//創(chuàng)建第三列job 
   jobCell.innerHTML = h.job; 
   row.appendChild(jobCell); 
   //到這里，json中的數據已經添加到表格中，下面為每行末尾添加刪除按鈕 
   var delCell = document.createElement('td');//創(chuàng)建第四列，操作列 
   row.appendChild(delCell); 
   var btnDel = document.createElement('input'); //創(chuàng)建一個input控件 
   btnDel.setAttribute('type','button'); //type="button" 
   btnDel.setAttribute('value','刪除');  
   //刪除操作 
   btnDel.onclick=function(){ 
     if(confirm("確定刪除這一行嘛？")){ 
       //找到按鈕所在行的節(jié)點，然后刪掉這一行 
       this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); 
       //btnDel - td - tr - tbody - 刪除(tr) 
       //刷新網頁還原。實際操作中，還要刪除數據庫中數據，實現(xiàn)真正刪除 
       } 
     } 
   delCell.appendChild(btnDel); //把刪除按鈕加入td，別忘了 
   return row; //返回tr數據   
   }   
</script>

3. 網頁測試