JavaScript中动态向表格添加数据的示例分析

这篇文章将为大家详细讲解有关JavaScript中动态向表格添加数据的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联是一家专注于成都做网站、网站设计与策划设计,长春网站建设哪家好?成都创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:长春等地区。长春做网站价格咨询:18982081108

1. 首先先写出表格的表头和主干部分

 
   
    
     编号 
     姓名 
     职位 
     操作 
     
   
   

2. 接下来就是网表格里面添加数据，这里用的是原生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数据   
   }   

3. 网页测试

显示成功，点击删除按钮，并确定即可删除这一行

删除第二行，可以！

关于“JavaScript中动态向表格添加数据的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

网页名称：JavaScript中动态向表格添加数据的示例分析
当前地址：http://cdiso.cn/article/peoppd.html