动态生成表格

最新推荐文章于 2023-11-16 23:03:18 发布

富江¢

最新推荐文章于 2023-11-16 23:03:18 发布

阅读量225

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_58235030/article/details/124078882

版权

<!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;
}
a:hover {
color: #a5f5cd;
}

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>


</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
}];

//获取根节点
var tbody = document.querySelector("tbody");
// step2. 所有数据都是放在 tbody 中的 tr 里面
for(var i = 0; i < datas.length; i++){
var newNode_tr = document.createElement("tr");
//填充表格数据
for (var key in datas[i]){
var newNode_td = document.createElement("td");
newNode_td.innerText = datas[i][key];
newNode_tr.appendChild(newNode_td);
}
//绑定删除按钮
var del_td = document.createElement("td");
var del_btn = document.createElement("a");
del_btn.href = "#";
del_btn.innerText = "删除";
del_btn.onclick = function (){
tbody.removeChild(this.parentNode.parentNode);
}
del_td.appendChild(del_btn);
newNode_tr.appendChild(del_td);
tbody.appendChild(newNode_tr);
}
</script>
</body>
</html>

富江¢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态生成表格

<!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>案例...
复制链接

扫一扫