用js实现动态添加表格数据

最新推荐文章于 2024-05-13 01:52:35 发布

艺术海洋

最新推荐文章于 2024-05-13 01:52:35 发布

阅读量6.1w

点赞数 30

分类专栏： js+css

本文链接：https://blog.csdn.net/baidu_20876831/article/details/80659730

版权

js+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 
 第一种方式: 
 
 <!DOCTYPE HTML> 
 
 < 
 html 
 > 
 
 < 
 head 
 > 
 
 < 
 meta  
 charset 
 = 
 UTF 
 -8> 
 
 < 
 title 
 >table</ 
 title 
 > 
 
 < 
 style 
 > 
 
 table { 
 
 margin:auto; 
 
 width: 60%; 
 
 border: 1px solid black; 
 
 border-collapse: collapse; 
 
 } 

 table caption { 
 
 color: blue; 
 
 font: 34px consolas bold; 
 
 } 

 table th, table td { 
 
 border: 1px solid black; 
 
 text-align:center; 
 
 } 

 table th { 
 
 font: 20px consolas bold; 
 
 background-color: gray; 
 
 } 

 table tr:nth-child(n+2){ 
 
 background-color: cyan; 
 
 } 

 table tr:nth-child(2n+2)  { 
 
 background-color: red; 
 
 } 
 
 </ 
 style 
 > 
 
 < 
 script 
 > 
 
 var data = [ 
 
 {id: "001", fullname: "张三", sex: "男", score: [98,33,48]}, 
 
 {id: "002", fullname: "李四", sex: "w", score: [11,22,33]}, 
 
 {id: "003", fullname: "kyo", sex: "m", score: [22,33,55]}, 
 
 {id: "004", fullname: "yamazaki", sex: "w", score: [99, 100, 80]} 
 
 ]; 

 var Student = function (id, fullname, sex, score) 
 
 { 
 
 this.id = id; 
 
 this.fullname = fullname; 
 
 this.sex = sex; 
 
 this.score = score; 
 
 } 

 var Score = function (chinese, math, english) 
 
 { 
 
 this.chinese = chinese; 
 
 this.math = math; 
 
 this.english = english; 
 
 } 

 var students = []; 
 
 for (var i = 0; i < data.length; i++) 
 
 { 
 
 var d = data[i]; 
 
 var s = d["score"]; 
 
 students.push(new Student (d["id"], d["fullname"], d["sex"], new Score(s[0], s[1], s[2]))); 
 
 } 

 onload = function () 
 
 { 
 
 var table = document.createElement("table"); 
 
 var tbody = document.createElement("tbody"); 
 
 table.appendChild(tbody); 
 
 var caption = table.createCaption(); 
 
 caption.innerHTML = "学生成绩表"; 
 
 var tr = tbody.insertRow (0); 
 
 var str = "学号,姓名,性别,语文,数学,英语".split(","); 
 
 for (var i = 0; i < str.length; i++) 
 
 { 
 
 var th = document.createElement("th"); 
 
 th.innerHTML = str[i]; 
 
 tr.appendChild (th); 
 
 } 
 
 for (var i = 0; i < students.length; i++) 
 
 { 
 
 var tr = tbody.insertRow (tbody.rows.length); 
 
 var obj = students[i]; 
 
 for (var p in obj) 
 
 { 
 
 var op = obj[p]; 
 
 if (p != "score") 
 
 { 
 
 var td = tr.insertCell (tr.cells.length); 
 
 td.innerHTML = op; 
 
 } 
 
 else 
 
 { 
 
 for (var p in op) 
 
 { 
 
 var td = tr.insertCell (tr.cells.length); 
 
 td.innerHTML = op[p]; 
 
 } 
 
 } 
 
 } 
 
 } 
 
 document.body.appendChild(table); 
 
 } 
 
 </ 
 script 
 > 
 
 < 
 body 
 > 

 </ 
 body 
 > 
 
 </ 
 html 
 > 
 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
第二种方式

利用javascript ，动态向表格中添加数据
1. 首先先写出表格的表头和主干部分
 
   [html]  
   view plaincopy
<table width="600" border="1" cellspacing="0">  
   <thead>  
      <tr>  
         <th>编号</th>  
         <th>姓名</th>  
         <th>职位</th>  
         <th>操作</th>  
      </tr>   
   </thead>  
   <tbody id="tbMain"></tbody>  
</table>  

2. 接下来就是网表格里面添加数据，这里用的是原生javascript
 
   [javascript]  
   view plaincopy
<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.οnclick=function(){  
         if(confirm("确定删除这一行嘛？")){  
             //找到按钮所在行的节点，然后删掉这一行  
             this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);  
             //btnDel - td - tr - tbody - 删除(tr)  
             //刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除  
             }  
         }  
     delCell.appendChild(btnDel);  //把删除按钮加入td，别忘了  
       
     return row; //返回tr数据      
     }      
</script>  

3. 网页测试
显示成功，点击删除按钮，并确定即可删除这一行
删除第二行，可以！

艺术海洋

关注

30
点赞
踩
150

收藏

觉得还不错? 一键收藏
4
评论
用js实现动态添加表格数据

第一种方式:&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=UTF-8&gt;&lt;title&gt;table&lt;/title&gt;&lt;style&gt;table { margin:auto; width: 60%; border: 1px solid black; border-c
复制链接

扫一扫