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" ...
最新文章
- 使用LWA和Lync模拟外部测试无边缘单前端环境
- python读取有空行的csv_如何在使用python读取CSV文件时跳过空行
- 为什么要用MyBatis-MyBatis
- Meanshift 均值飘移实现图像聚类 MATLAB实现(4)
- 例子---PHP与Form表单前导篇
- 如何用vue实现模态框组件
- Linux的netstat命令使用
- 微信公众平台测试账号的注册与申请
- 建筑力学与结构【9】
- 怎样清理xp系统垃圾
- hdu2073 无限的路 瞎搞
- Facebook多账号运营如何防关联
- 哪家宽带网速是最好最快的?
- 2017远景能源Java面试
- unity制作mmd视频
- Mac的app store打开白屏解决方法
- 边缘云平台架构及商用实践(联通)
- SpreadJS 纯前端表格控件应用案例:铭天预算执行系统
- 看别人分享的图片停不下来,还有这么有意思的网站?
- 构造函数内部原理、原型讲解、写法、运用
热门文章
- 没事学学docker:解决dockerfile出现的Error: Failed to download metadata for repo ‘appstream‘: Cannot prepar
- 游戏筑基开发之利用文件函数取出配置文件(ini文件)的数据实体(C语言)
- 华为VLAN聚合原理与实验
- LNMP详解(十)——Nginx负载分担实战
- MySQL 第七次练习(存储过程函数)
- JS函数表达式的特征和递归
- C# 7.0特性与vs2017
- 并发控制技术手段之多版本(三)
- 虚机里的vCenter 迁移
- 【DATAGUARD】物理dg在主库丢失归档文件的情况下的恢复(七)