<style>
table{
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th{
border: 1px solid #333;
}
thead tr{
height: 40px;
background-color: #ccc;
}
</style>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 准备学生数据
var datas = [{
name:'喜洋洋',
subject:'Javascript',
score:'100'
},{
name:'美羊羊',
subject:'Javascript',
score:'100'
},{
name:'懒洋洋',
subject:'Javascript',
score:'100'
},{
name:'村长',
subject:'Javascript',
score:'100'
}];
// 2.往tbody里面创建行;通过数组的长度我们就创建几行
var tbody = document.querySelector('tbody');
for (var i=0;i<datas.length;i++){ //外面的for循环管行 tr
// 创建tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 行里面创建单元格td单元格的数量取决于每个对象里面的属性个数 for循环遍历对象datas[i]
for(var k in datas[i]){ //里面的for循环管列td
// 创建单元格
var td = document.createElement('td');
td.innerHTML= datas[i][k];
tr.appendChild(td);
}
// 3.创建有删除2个字的单元格
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
// 4.删除操作
var as = document.querySelectorAll('a');
for (var i=0;i<as.length;i++){
as[i].onclick = function(){
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
10-06
1104