javascript创建动态表格
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <title>动态表格</title>
6 <style>
7 table { 8 width: 500px;
9 margin: 50px auto;
10 border: 1px solid #000;
11 border-collapse: collapse;
12 }
13
14 thead { 15 text-align: center;
16 }
17
18 table tr { 19 height: 40px;
20 background-color: orange;
21 }
22
23 table td { 24 border: 1px solid #000;
25 }
26
27 tbody td { 28 padding: 0 10px;
29 }
30
31 table a { 32 float: right;
33 }
34 </style>
35 </head>
36 <body>
37
38 <table cellpadding="0" cellspacing="0">
39 <thead>
40 <tr>
41 <td>姓名</td>
42 <td>类别</td>
43 <td>分数</td>
44 <td>操作</td>
45 </tr>
46 </thead>
47 <tbody></tbody>
48 </table>
49 <script>
50 // 动态生成表格
51 // 思想：利用数组的长度来创建表格的行数
52 // 利用数组内对象的属性长度来创建列 创建列的同时进行赋值
53 var dates = [
54 {
55 name: '张飒',
56 type: 'javascript',
57 score: 90
58 }, {
59 name: '李四',
60 type: 'javascript',
61 score: 80
62 }, {
63 name: "王二",
64 type: 'java',
65 score: 98
66 }, {
67 name: "王二",
68 type: 'java',
69 score: 98
70 }
71 ];
72 var tbodys = document.querySelector('tbody');
73 // 根据dates.length 创建tr
74 for (var i = 0; i < dates.length; i++) {
75 // 创建 tr 元素
76 var trs = document.createElement('tr');
77 // 添加元素到tbody 内部
78 tbodys.appendChild(trs);
79 // 根据dates[i] 对象的属性长度来创建 td
80 for (var k in dates[i]) {
81 // 创建 td 元素
82 var tds = document.createElement("td");
83 // 将对象的值赋值给td 元素
84 tds.innerHTML = dates[i][k];
85 // 将td 添加到 tr 内
86 trs.appendChild(tds);
87 }
88 // 创建操作 单元格
89 var td = document.createElement('td');
90 // 给操作单元格 添加内容
91 td.innerHTML = '<a href="javascript:;">删除</a>';
92 trs.appendChild(td);
93 }
94 // 获取所有 a 元素
95 var as = document.querySelectorAll('a');
96 // 循环 注册点击事件;
97 for (var j = 0; j < as.length; j++) {
98 as[j].onclick = function () {
99 tbodys.removeChild(this.parentNode.parentNode); //移除a 元素的爷爷即：当前a 所在的tr
100 }
101 }
102 </script>
103 </body>
104 </html>
转载于:https://www.cnblogs.com/nigori/p/10764938.html
javascript创建动态表格相关推荐
- JavaScript实现动态表格
JavaScript实现动态表格 (改建版,代码见最下面) 基本效果如下 点击添加,可以将输入框中的值,新增到表格中:点击删除可以删除本行内容. 代码如下: 第一种方式(较简单,建议使用) <! ...
- react创建动态表格_教程：使用React创建电子表格
react创建动态表格 Related content 相关内容 First steps 第一步 Build a simple spreadsheet 建立一个简单的电子表格 Introducing ...
- 点击按钮创建动态表格
目录 涉及知识点 成品展示 一.效果展示 二.代码展示 1.基础框架 2.CSS样式 3.JS代码 总结 涉及知识点 创建元素document.createElement(" &quo ...
- Java利用poi生成word(包含插入图片，动态表格，行合并)
Java利用poi生成word(包含插入图片,动态表格,行合并) 测试模板样式: 图表 1 Word生成结果: 图表 2 需要的jar包:(具体jar可自行去maven下载) Test测试类: imp ...
- 在 JavaScript 中动态创建表格、按钮和 DIV
使用 document.createElement() 方法,您可以在 JavaScript 中动态创建指定的 HTML 元素.创建后,您可以将元素插入(或添加)到您的网页,或将其添加到预定义元素或动 ...
- Javascript DOM动态添加表格
一次翻译技术文章,本身英语水平很烂,翻译的也是自己刚开始学习的技术,所以能勉强看懂英文的话都要尽量读 原文 而不要看我的翻译,免得被误导.阅读原文 这篇文章简单介绍了DOM 1.0一些基本而强大的方法 ...
- JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
- JavaScript 动态表格操作
阅读目录 JavaScript 动态创建表格 第一种示例 第二种示例 示例解析 表格相关的属性和方法 1.1 Table 对象集合 1.2 Table 对象方法 1.3 Table 对象常用属性 1. ...
- HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- JavaScript实现动态添加页面的表格行数并获取数据
JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了. <table cellpadding="0" ...
最新文章
- STM32学习笔记9（SysTick滴答时钟）
- flume-hdfs 按照时间关闭并新开文件
- BYOD安全保护的“原生态”方法
- 广东时代互联---网络管理面试
- S5 Linux信息显示与搜索文件命令
- php7.0 yield,PHP7中生成器的新特性 yield-from amp;amp; return-values
- 数据结构基础：树结构的学习笔记
- Windows 2003 NTP 时间服务器设置
- 如何过滤某一频率的声音
- RabbitMQ环境搭建教程收集（待实践）
- apk逆向思路_Java语言的逆向(Android APP)
- NVIDIA Jetson Xavier NX 计算GPIO编号
- 手机互联功能 android,安卓手机互联服务下载（手机互联正确的打开方式知道吗）...
- 华为软件测试笔试真题之变态逻辑推理题【二】华为爆火面试题
- 学习HTML 笔记A3 ：HTML标题、段落、文本格式化
- 世界第一代电子计算机诞生在,1、世界上第一台电子计算机诞生于
- Mysql语句商城系统表案例
- 什么是顶级域名、根域/二级域名、一级域名/子域名
- 退出手机QQ依然显示在线
- 5G无用时代的终结—从iPhone 12系列到vivo 6G应用场景的展望