这篇博客展示了如何使用JavaScript创建一个动态表格，用于展示不同角色的法术和法力值。通过模拟数据，作者创建了一个包含多个角色的对象数组，并在表格中动态生成了这些数据。此外，还讨论了如何在表格中添加删除操作的功能，实现动态更新表格内容。
<body>
<table cellspacing="0">
<thead>
<tr>
<th>角色</th>
<th>法术</th>
<th>法力</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 表格数据动态生成 -->
<!-- <tr>
<td></td>
</tr> -->
</tbody>
</table>
<script>
// 模拟数据：利用对象存储数据
// step1. 准备不同人物的数据
// 数组对象 datas 可以存储任意类型数据
// 每个数组元素 datas[i] 都是一个对象
var datas = [{
// 角色
name: '闻人翊悬',
// 法术
magic: '火系',
// 法力
mana: 85
}, {
name: '申屠子夜',
magic: '水系',
mana: 80
}, {
name: '公仪楚人',
magic: '土系',
mana: 85
}, {
name: '容成墨熙',
magic: '木系',
mana: 90
}, {
name: '轩辕神君',
magic: '金系',
mana: 100
}, {
name: '小新',
magic: '童系',
mana: 100
}];
// console.log(datas.length);
// step2. 所有数据都是放在 tbody 中的 tr 里面
// step3. 创建含有删除的单元格
// step4. 删除操作
// 点击 a 删除 当前 a 所在的行(链接的父节点的父节点)
// node.removeChild(child)
// for(var k in obj) {
// k 得到的是属性名
// obj[k] 得到是属性值
// }
</script>
</body>
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
