<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
/* 案例分析：
①因为里面的学生数据都是动态的，我们需要JS动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储
②所有的数据都是放到tbody里面的行里面
③因为行很多，我们需要循环创建多个行（对应多少人）
④每个行里面又有很多的单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
⑤最后一列单元格是删除，需要单独创建单元格 */
// 1、先准备好学生的数据
var datas = [{
name: '张三',
subject: 'JavaScript',
score: 100,
},{
name: '李四',
subject: 'JavaScript',
score: 70,
},{
name: '王五',
subject: 'JavaScript',
score: 90,
}
,{
name: '赵六',
subject: 'JavaScript',
score: 50,
}];
// 2、 往tbody里面创建行：有几个人（通过数组的长度）我们就创建几行
var tbody = document.querySelector('tbody')
for(var i = 0; i < datas.length; i++){
// 创建tr行
var tr = document.createElement('tr')
tbody.appendChild(tr)
// 行里面创建单元格，td单元格的数量取决于每个对象里面的属性个数
for(var k in datas[i]){
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>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
