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

第一种方式:


< 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. 首先先写出表格的表头和主干部分

<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

"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数据
     }

3. 网页测试

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

删除第二行，可以！