实现动态生成表格

最新推荐文章于 2023-02-15 16:40:38 发布

qq_69108530

最新推荐文章于 2023-02-15 16:40:38 发布

阅读量224

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_69108530/article/details/124078544

版权

<body>
<table cellspacing="0">
<thead>
<tr>
<th>角色</th>
<th>法术</th>
<th>法力</th>
<th>操作</th>
</tr>
</thead>
<tbody>


</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 里面