一.思路分析
1.数据采用对象形式存储
2.所有的数据放到tbody里面
3.行数=数组长度
4.单元格个数=数组中每个对象的属性个数
5.将对象属性的值赋给单元格,然后将单元格插入tr行中
6.最后一列单元格是删除,单独创建
二.效果展示
1会根据数据变化自动生成
三.代码
<style>
table{
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
th{
height: 40px;
border: 1px solid #333;
background-color: #ccc;
}
td{
height: 40px;
background-color: #ccc;
border: 1px solid #333;
}
</style>
<script type="text/javascript">
window.onload=function(){
var datas=[{ //用数组来存储数据
name:'皮特',
subject:'js',
score:100
},{
name:'loop',
subject:'js',
score:90
},{
name:'小明',
subject:'js',
score:90
},{
name:'珊迪',
subject:'js',
score:80
}];
var tbody=document.querySelector('tbody');
for(var i=0;i<datas.length;i++){
var tr=document.createElement('tr'); //创建tr行,行数等于数组长度
tbody.appendChild(tr); //将行插入tbody中
for(var k in datas[i]){ //遍历datas中的第i个对象 K得到属性名,obj[k]得到属性值
var td=document.createElement('td'); //创建单元格td
td.innerHTML= datas[i][k]; //将第i个对象的属性值赋给td
tr.appendChild(td); //将单元格td插入tr行
}
var td=document.createElement('td'); //创建删除的单元格
td.innerHTML='<a href="javascript:;">删除</a>'; //给td赋值
tr.appendChild(td); //插入到tr
}
var as=document.querySelectorAll('a');
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
tbody.removeChild(this.parentNode.parentNode); //删除tbody的子元素tr行(是a的父亲的父亲)
}
}
}
</script>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>