JavaScript动态生成表格

源代码

<!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>

运行结果

JavaScript动态生成表格相关推荐

利用Javascript动态生成表格的小demo
利用Javascript动态生成表格的小demo 利用Javascript中data数据库存储内容动态生成表格,点击删除可对整行内容进行删除 <!DOCTYPE html> <htm ...
javascript案例：动态生成表格
js案例:动态生成表格一.文字梳理 * 创建一个页面:两个输入框和一个按钮 * 第一步:得到输入的行和列的值 * 第二步:生成表格 - 循环行 - 在行里面循环单元格 * 第三步:把表格(表格放到变 ...
JavaScript基础学习动态生成表格
JavaScript基础学习动态生成表格根据我们拥有的数据来动态创建表格的行和列,以及实现删除行的操作 <!DOCTYPE html> <html lang="en&q ...
WebAPI(part10)--动态生成表格
学习笔记,仅供参考,有错必究文章目录动态生成表格动态生成表格从本地取到数据,动态生成表格,并添加删除操作. 代码: <!DOCTYPE html> <html>< ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
js动态生成表格【含合并单元格的表格】
最近遇到需求,动态生成表格,类似Excel,支持合并单元格的表格,代码分享给大家~ 一.网上找到的简单生成表格的例子: 以下是生成规则表格m行*n列类似,可以直接打开HTML查看结果. <!DO ...
JSON格式化动态生成表格表格转置行列转换 Excel导出
先看效果初始化: JSON格式化 : 生成表格-方式1 : 生成表格-方式2 : Excel导出需要行求和.列求和功能的查看 JSON格式化动态生成表格表格转置行列转换 Excel导出行求 ...
一段动态生成表格的JSP代码讲解
一段动态生成表格的JSP代码讲解 <table border="1" width="600px" align="center"> ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
应用Java程序片段动态生成表格
通过Jsp页面动态来显示数据库中的数据,在根据条件进行查询时,将调查结果显示在jsp页面中,使用java程序片段(Scriptlet)动态生成表格在jsp文件中,可以在"<%&quo ...

JavaScript动态生成表格

源代码

运行结果

JavaScript动态生成表格相关推荐

最新文章

热门文章