JS动态向表格添加数据

灰太狼 2022-04-15 05:16 488阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>可动态删除的表格</title>
    </head>
    
    <body>
    <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>
    </body>
    </html>