使用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]表示屬性值