一.思路分析
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');
tbody
.appendChild(tr
);
for(var k
in datas
[i
]){
var td
=document
.createElement('td');
td
.innerHTML
= datas
[i
][k
];
tr
.appendChild(td
);
}
var td
=document
.createElement('td');
td
.innerHTML
='<a href="javascript:;">删除</a>';
tr
.appendChild(td
);
}
var as=document
.querySelectorAll('a');
for(var i
=0;i
<as.length
;i
++){
as[i
].onclick=function(){
tbody
.removeChild(this.parentNode
.parentNode
);
}
}
}
</script
>
<body
>
<table
>
<thead
>
<tr
>
<th
>姓名
</th
>
<th
>科目
</th
>
<th
>成绩
</th
>
<th
>操作
</th
>
</tr
>
</thead
>
<tbody
>
</tbody
>
</table
>
</body
>
