注:思路以及重点步骤在最下方
HTML
<table border="1" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
JavaScript
var datas = [
{
name:'易烊千玺',
subject:'javascript',
sorce: 100
},
{
name:'迪丽热巴',
subject:'javascript',
sorce: 90
},
{
name:'古力娜扎',
subject:'javascript',
sorce: 80
},
{
name:'上官卿言',
subject:'javascript',
sorce: 80
}
];
var tbody = document.querySelector('tbody');
// 第一轮循环遍历的是数组,拿到行
for(var i = 0; i < datas.length; i++){
var tr = document.createElement('tr');
// 第二轮循环遍历的是数组的每个对象datas[i],拿到单元格
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++){
// 删除当前a所在的行,(a链接爸爸的爸爸)
as[i].onclick = function(){
tbody.removeChild(this.parentNode.parentNode);
}
}
重点步骤:
- 先准备好学生的数据,以数组的形式呈现,删除表格的操作不需要写进数组,{我是没有写进去,如果各位大佬会可以教教我}。
- 所有数据都生成在tbody里面。
- 因为行很多,需要循环,用到了创建和追加。document.creatElement()和node.appendChild()。{这两个公式特别容易写错,大家一定要用心记}
- 往里面创建单元格th,此时datas[i]是进行遍历数组的而每个对象。
- 把对象里的属性值给单元格。td.innerHTML = data[i][k]
- 最后一列单元格是删除,需要单独创建,它不在第二层循环中,在第一层循环中。
- 删除操作,跳出循环,重新循环。重点:node.removeChild(); node.parentNode().