js 动态生成表格案例
<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链接所在单元格的所在行
