动态生成表格

liying999

于 2022-04-10 08:35:56 发布

阅读量107

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/liying999/article/details/124072362

版权

该博客展示了如何使用JavaScript动态生成HTML表格，并模拟数据进行填充。通过创建元素节点、遍历数据对象以及添加删除操作，实现了表格内容的动态展示和交互功能。此示例适用于前端开发中的数据可视化和动态数据展示场景。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>案例实现：动态生成表格</title>
<style>
a {
text-decoration: none;
}
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>
<!-- <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 里面
var tbody =document.querySelector('tbody');
for (var i=0;i<datas.length;i++){
//1.创建tr行元素节点
var tr =document.createElement('tr');
//向tbody中追加tr
tbody.appendChild(tr);
//2.行里面创建单元格（跟数据有关系的3个单元格）td
//单元格的数量取决于每个对象2 datas[i]里面的属性个数
//结合for 循环遍历对象 datas[i]
for (var k in datas[i]){//内层for循环控制单元格 td
//创建td单元格元素节点
var td =document.createElement('td');
//把对象中的属性值 datas[i][k] 赋值给td单元格
td.innerHTML=datas[i][k];
//向tr中追加单元格 td中的属性值/内容
tr.appendChild(td);
}
// step3. 创建含有删除的单元格
var td =document.createElement('td');
td.innerHTML = '<a href="JavaScript:;">删除</a>';
tr.appendChild(td);
// step4. 删除操作
// 点击 a 删除当前 a 所在的行(链接的父节点的父节点)
// node.removeChild(child)
var as=document.querySelectorAll('a');
for (var i=0;i<as.length;i++){
as[i].οnclick=function(){
tbody.removeChild(this.parentNode.parentNode);
}
}
}
</script>
</body>
</html>

liying999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫