使用JavaScript动态创建表格

 

 

案例分析

 

① 因为里面的学生数据都是动态的，我们需要js 动态生成。 这里我们模拟数据，自己定义好 数据。 数据我们采取对象形式存储。

② 所有的数据都是放到tbody里面的行里面。

③ 因为行很多，我们需要循环创建多个行（对应多少人）

④ 每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格， 并且把数据存入里面（双重for循环）

⑤ 最后一列单元格是删除，需要单独创建单元格。

⑥ 最后添加删除操作，单击删除，可以删除当前行。

• 准备工作

我们暂时用数组来存储一组学生成绩数据 ：

 var data = [{
            name:"ysw",
            subject:"Oracle",
            grade:91
        },{
            name:"wt",
            subject:"redis",
            grade:95
        },{
            name:"zxl",
            subject:"java",
            grade:95
        },{
            name:"ywy",
            subject:"Oracle",
            grade:93
        },{
            name:"lty",
            subject:"mysql",
            grade:94
        }];

将表格的表头搭建好

 

 

 

<style>
        table{
            width: 400px;
            
        }
        tr{
            border: 1px solid #000;
            
        }
        th{
            width: 50px;
            height: 30px;
            background-color: pink;

        }
        td{
            width: 50px;
            height: 30px;
            background-color: rgb(239, 211, 215);  
            border: 1px solid #fff;
            text-align: center;
            line-height: 30px;
        }
        a{
            text-decoration: none;
            color: red;
        }
    </style>
<table>
        <thead><tr>
            <th>姓名</th>
            <th>课程</th>
            <th>成绩</th>
            <th>操作</th>
        </tr></thead>
        <tbody></tbody>
    </table>

• 创建动态表格  

 var tbody = document.querySelector("tbody");
        //1.外层for循环用来循环每一行
        for(var i = 0;i<data.length;i++){
            var tr = document.createElement("tr");
            tbody.appendChild(tr);
            //2.里层for用来循环每一个格子即td
            //for in 循环遍历对象 k是属性名，obj[k]是属性值 ，即data[i][k]
            for(var k in data[i]){
                var td = document.createElement("td");
                td.innerHTML = data[i][k];
                tr.appendChild(td);
            }
            //3.单独创建的单元格
            var td = document.createElement("td");
            td.innerHTML ='<a href="javascript:;">删除</a>';
            tr.appendChild(td);
            
        }
       //4.删除操作，获取所有a 节点
        var as =document.querySelectorAll("a");
        for(var i = 0;i<as.length;i++){
            as[i].onclick = function(){
                //tbody里面的孩子 ，a的父亲的父亲
               tbody.removeChild(this.parentNode.parentNode);
            }
        }

结果展示：

 

 

 知识点：

for in循环对象

for(var k in obj){}

k是属性名 ，obj[k]表示属性值