动态生成表格案例
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
margin: 100px auto;
text-align: center;
border-collapse: collapse;
}
td {
width: 100px;
border: 2px solid #333;
}
thead td {
height: 50px;
background-color: cadetblue;
color: #fff;
font-size: 20px;
}
tr td:nth-child(1) {
width: 150px;
}
tr td:nth-child(2) {
width: 300px;
}
tbody td {
height: 30px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>姓名</td>
<td>科目</td>
<td>成绩</td>
<td>操作</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 案例分析
// 因为为动态表格 所以我们的数据都是从 后台获取的 我们先利用对象简单的创建一个数据库
// 然后在 创建 tr td 添加到 tbody里 数据是动态的 所以我们利用 for 循环来添加 长度为 对象的长度
// 创建好 结构后 把 对象里的属性 利用 for in 变量对象 添加到 td 单元格内
// 在添加 最后一个 删除连接 然后获取到 a 的父亲 td 添加点击事件来删除对应的 tr
var data = [
{
name: '肖战',
kechen: 'javaScript',
chengj: 100
},
{
name: '阮鹏',
kechen: 'javaScript',
chengj: 59
},
{
name: '吴磊',
kechen: 'javaScript',
chengj: 98
},
{
name: '胡歌',
kechen: 'javaScript',
chengj: 100
},
{
name: '王一博',
kechen: 'javaScript',
chengj: 99
}
];
var tbody = document.querySelector('tbody')
for (var i = 0; i < data.length; i++) {
// 创建行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 这里循环创建列 这的列也不能写死 得是 对象里面的内容 所以 我们用 for in 来遍历
for (var k in data[i]) {
// 创建单元格
var td = document.createElement('td');
// 这里因为上面已经创建了 tr 节点所以不需要在获取 tr 了
tr.appendChild(td);
// 这里 data[i][k] , data[i] 数组里的第几个对象 里面的 data[i][k] 属性
td.innerHTML = data[i][k]
}
// 创建最后一个 td 给 td 添加 a 删除连接
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 () {
// 这里删除 的是 a 爸爸的爸爸 也就是 tr 所有得写 this.parentNode.parentNode
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
</body>
</html>