案例分析

① 因為裡面的學生資料都是動態的，我們需要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]表示屬性值