利用javascript ，動態向表格中新增資料

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>
 

<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'); //建立行
	 
	 var idCell = document.createElement('td'); //建立第一列id
	 idCell.innerHTML = h.id; //填充資料
	 row.appendChild(idCell); //加入行  ，下面類似
	 
	 var nameCell = document.createElement('td');//建立第二列name
	 nameCell.innerHTML = h.name;
	 row.appendChild(nameCell);
	 
	 var jobCell = document.createElement('td');//建立第三列job
	 jobCell.innerHTML = h.job;
	 row.appendChild(jobCell);
	 
	 //到這裡，json中的資料已經新增到表格中，下面為每行末尾新增刪除按鈕
	 
	 var delCell = document.createElement('td');//建立第四列，操作列
	 row.appendChild(delCell);
	 var btnDel = document.createElement('input'); //建立一個input控制元件
	 btnDel.setAttribute('type','button'); //type="button"
	 btnDel.setAttribute('value','刪除'); 
	 
	 //刪除操作
	 btnDel.onclick=function(){
		 if(confirm("確定刪除這一行嘛？")){
			 //找到按鈕所在行的節點，然後刪掉這一行
			 this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
			 //btnDel - td - tr - tbody - 刪除(tr)
			 //重新整理網頁還原。實際操作中，還要刪除資料庫中資料，實現真正刪除
			 }
		 }
	 delCell.appendChild(btnDel);  //把刪除按鈕加入td，別忘了
	 
	 return row; //返回tr資料	 
	 }	  
</script>
 

顯示成功，點選刪除按鈕，並確定即可刪除這一行

刪除第二行，可以！