JavaScript中动态向表格添加数据

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