<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>