JavaScript动态生成表格

article/2025/9/27 17:13:26

源代码

<!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><!-- 表格数据动态生成 --><!-- <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}];//获取根节点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.innerText = "删除";del_btn.href = "#";//绑定单击事件，获取单击对象的父级的父级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>