JavaScript-节点操作之 动态生成表格案例
Posted 我真的爱敲代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript-节点操作之 动态生成表格案例相关的知识，希望对你有一定的参考价值。
文章目录
节点操作
- 动态生成表格案例
- 因为里面的学生数据都是动态的，需要js 动态生成。 这里模拟数据，自己定义好数据。 对于数据采取对象形式存储。
- 所有的数据都是放到tbody里面的行里面。
- 因为行很多，需要循环创建多个行（对应多少人）
- 每个行里面又有很多单元格（对应里面的数据），还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
- 最后一列单元格是删除，需要单独创建单元格。
- 最后添加删除操作，单击删除，可以删除当前行。
<body>
<style>
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
border-color: #ccc;
}
</style>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 1.先准备学生数据
var datas = [{
name: '魏璎珞',
subject: 'javascript',
score: 100
}, {
name: '弘历',
subject: 'JavaScript',
score: 98
}, {
name: '傅恒',
subject: 'JavaScript',
score: 99
}, {
name: '明玉',
subject: 'JavaScript',
score: 88
}];
// 2.往tbody里面创建行：有几个人（通过数组长度）就创建几行
var tbody = document.querySelector('tbody')
for (var i = 0; i < datas.length; i++) { //--->外面的for循环管行
// （1）创建tr行
var tr = document.createElement('tr')
tbody.appendChild(tr)
// （2）行里创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象的属性个数
for (var j in datas[i]) { //双重for循环--->里面的for循环管列
// 创建单元格
var td = document.createElement('td')
// 把对象里面的属性值datas[i][j]给td
td.innerhtml = datas[i][j]
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 () {
// 点击a 删除当前a所在的行（链接的爸爸的爸爸）
tbody.removeChild(this.parentNode.parentNode)
}
}
// for (var k in obj) {
// k得到的是属性名
// obj[k]
// }
</script>
</body>
该案例对后期学习有很大的帮助，有时间多写几遍
以上是关于JavaScript-节点操作之 动态生成表格案例的主要内容，如果未能解决你的问题，请参考以下文章