<1>布局：一個table表格，表格分為兩個部分，上面是thead表頭，表頭里面僅一行，有4列（th), 下面是tbody表格內容，要求tbody中的每一行都是用js動態創建的
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成績</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<2>樣式
<style>
*{
padding:0;
margin:0;
}
table{
width:500px;
margin:100px auto;
border-collapse:collapse;/*邊框合並模式*/
text-align:center;
}
td,th{ /*td是后面tbody中動態創建的單元格，th是thead里面那一行中的單元格*/
border:1px solid #333;
}
thead tr{
height:40px;
background-color: #cccccc;
}
<3>js動態創建表格：
第一步：先准備數據，一共有三個人的成績，作為三個對象放進數組中
var datas=[{ name:"甲", subject:"javascript", score:100 },{ name:"乙", subject:"javascirpt", score:99 },{ name:"丙", subject:"javascript", score:98 }];
第二步：在tbody里面創建每一行，行數就等於datas數組的長度，有幾個人的成績就有幾行
for(var i=0;i<datas.length;i++) { var tr=document.createElement("tr"); tbody.appendChild(tr); }
第三步：在已經創建好的行 tr 中，創建單元格, 注意是跟數據有關的三個單元格，td單元格的數量取決於datas[ ] 數組中每個對象的屬性個數
for(var i=0;i<datas.length;i++) { var tr=document.createElement("tr"); tbody.appendChild(tr); for(var k in datas[i]) { var td=document.createElement("td"); tr.appendChild(td); td.innerHTMl=datas[i][k]; } }
這里用for循環遍歷數組 ， k得到的是屬性名，obj[k]得到的是屬性值
for( var k in obj) {
}
第四步：在每一行里面創建有刪除二字的單元格：
for(var i=0;i<datas.length;i++) { var tr=document.createElement("tr"); tbody.appendChild(tr); for(var k in datas[i]) { var td=document.createElement("td"); tr.appendChild(td); td.innerHTML=datas[i][k]; } var td=document.createElement("td"); tr.appendChild(td); td.innerHTML="<a href="javascript:;">刪除</a>" ; }
第五步：刪除操作，點擊“刪除”，所點擊的那一行就會被刪除
var as=document.querySelectorAll("a"); for(var i=0; i<as.length;i++) { as[i].onclick=function() { tbody.removeChild(this.parentNode.ParentNode); } }
全部完整代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } table{ width:500px; margin:100px auto; border-collapse:collapse;/*邊框合並模式*/ text-align:center; } td,th{ border:1px solid #333; } thead tr{ height:40px; background-color: #cccccc; } </style> </head> <body> <table> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成績</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </body> </html> <script> //1,先准備數據 var datas=[{ name:"甲", subject:"javascript", score:100 },{ name:"乙", subject:"javascirpt", score:99 },{ name:"丙", subject:"javascript", score:98 }]; //2,往tbody里面創建行，有幾個人（通過數組的長度）我們就創建幾行 var tbody=document.querySelector("tbody"); for(var i=0;i<datas.length;i++) //外面的for循環 是 行tr { var tr=document.createElement("tr"); tbody.appendChild(tr); //3,往tr每一行里面創建單元格（跟數據有關系的3個單元格），td單元格的數量取決於每個對象的屬性個數 for循環遍歷對象 datas[i] for(var k in datas[i]) //里面的for循環是 列 { var td=document.createElement("td"); //創建單元格 tr.appendChild(td); td.innerHTML=datas[i][k]; //把對象里面的屬性值 datas[i][k]給td } //4，創建有刪除二字的單元格 var td=document.createElement("td"); tr.appendChild(td); td.innerHTML="<a href='javascript:;'>刪除</a>"; } //5,刪除操作 var as=document.querySelectorAll("a"); for(var i=0;i<as.length;i++) { as[i].onclick=function () { //點擊a 刪除 當前a 所在的行（a鏈接的爸爸的爸爸） tbody.removeChild(this.parentNode.parentNode); } } </script>
關鍵代碼：
1，var datas=[{ }, { }, { }] ; 用數組准備數據
2，行數是通過數組的長度創建（datas.length)，包含數據的列數是根據數組中每個對象的屬性的個數創建 (datas[i] ) , 都是通過for循環遍歷，外面的for循環遍歷行，里面的for循環遍歷列，從而創建單元格
3，td.innerHTML=datas[i][k]; 把數組中每個對象的每個屬性值依次賦給單元格 td
4，最后一列的所有“刪除”的單元格單獨創建，也是根據行數創建
5，td.innerHTML="<a href='javascript:;'>刪除</a>"; href屬性等於“javascript:;” ,可以避免頁面跳轉
6，tbody.removeChild(this.parentNode.parentNode; 刪除操作中是tbody需要刪除某一個孩子（某一行），表示為當前點擊的a鏈接所在單元格的所在行