JavaScript实现动态表格
运行效果：
源代码：
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <title>动态表格</title>
6 </head>
7 <body>
8 <button type="button" onclick="refresh()">刷新</button>
9 <button type="button" onclick="checkAll()">全选</button>
10 <button type="button" onclick="uncheckAll()">不选</button>
11 <button type="button" onclick="addCell()">添加</button>
12 <button type="button" onclick="copyCell()">拷贝</button>
13 <button type="button" onclick="copyCell();delCell()">移动</button>
14 <button type="button" onclick="delCell()">删除</button>
15
16 <table id="table1" border="1" width="320">
17 <tr>
18 <td width="20"><input type="checkbox" /></td>
19 <td width="100">1</td>
20 <td width="100">1</td>
21 <td width="100">1</td>
22 </tr>
23 <tr>
24 <td><input type="checkbox"></td>
25 <td>2</td>
26 <td>2</td>
27 <td>2</td>
28 </tr>
29 </table>
30 <br />
31 <table id="table2" border="1" width="320">
32 <tr>
33 <td width="20"><input type="checkbox" /></td>
34 <td width="100">你好！</td>
35 <td width="100">你好！</td>
36 <td width="100">你好！</td>
37 </tr>
38 <tr>
39 <td><input type="checkbox" /></td>
40 <td>你坏！</td>
41 <td>你好！</td>
42 <td>你好！</td>
43 </tr>
44 </table>
45 <form name="frmRefresh" action="dynamic_table.html">
46 </form>
47
48 <script type="text/javascript">
49 function addCell(){ //添加新的单元格
50 //插入新的一行
51 var oTargetRow = document.all("table1").insertRow();
52 for (var k = 0; k < document.getElementById("table1").rows[0].cells.length; k++) {
53 var oCell = oTargetRow.insertCell();
54 if (parseInt(k) === 0) {
55 oCell.innerHTML = "<input type='checkbox'>";
56 }
57 else {
58 oCell.innerHTML = k;
59 }
60 }
61 }
62
63 function checkAll(){ //选中所有的单元格
64 var eInput = document.all("table1").getElementsByTagName("input");
65 for (var i = 0; i < eInput.length; i++) {
66 eInput[i].checked = true;
67 }
68 }
69
70 function uncheckAll() {
71 var eInput = document.all("table1").getElementsByTagName("input");
72 for (var i = 0; i < eInput.length; i++) {
73 eInput[i].checked = false;
74 }
75 }
76
77 function copyCell(){ //拷贝单元格
78 var eInput = document.all("table1").getElementsByTagName("input");
79 var oTargetRow = null;
80 for (var i = 0; i < eInput.length; i++) {
81 if (eInput[i].checked) {
82 var oSourceRow = eInput[i].parentElement.parentElement;
83 //插入新的一行
84 oTargetRow = document.all("table2").insertRow();
85 for (var k = 0; k < document.all("table1").rows[0].cells.length; k++) {
86 var oCell = oTargetRow.insertCell();
87 oCell.innerHTML = oSourceRow.cells[k].innerHTML;
88 }
89 }
90 }
91 }
92
93 function delCell(){//删除单元格
94 var eInput = document.all("table1").getElementsByTagName("input");
95 for (var i = eInput.length - 1; i >= 0; i--) {
96 if (eInput[i].checked) {
97 var oSourceRow = eInput[i].parentElement.parentElement;
98 document.all("table1").deleteRow(oSourceRow.rowIndex);
99 }
100 }
101 }
102
103 function refresh(){ //刷新
104 frmRefresh.submit();
105 }
106
107 </script>
108 </body>
109 </html>
JavaScript实现动态表格的更多相关文章
- JavaScript 创建动态表格
JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...
- 5.11-5.15javascript制作动态表格
制作动态表格的主要是运用js中表格类的insertRow.insertCell简易添加行和列的代码,不过要注意每行添加的表格是有位置行编号的,每行的编号为rows.length-1,增加的表格内的标签 ...
- jQuery的下面是动态表格动态表单中的HTML代码
动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...
- jQuery动态表格插件 AppendGrid
AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...
- JS 创建动态表格练习
创建动态表格 1.1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...
- 在<s:iterator>标签里给动态表格添加序号
在<s:iterator>标签里给动态表格添加序号,需要用到<s:iterator>标签里的Status属性里的count eg:<s:iterator value=&q ...
- HTML5&CSS3经典动态表格
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript DOM动态创建（声明）Object元素
http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...
随机推荐
- 微信小程序断网处理
wx.onNetworkStatusChange(function callback) 参数 function callback 网络状态变化事件的回调函数 参数 Object res 属性 类型 说 ...
- CentOS Linux服务器 挂载硬盘
1.通过fdisk -l 查看目前的硬盘信息,默认是从sda开始排,增加第二块硬盘的时候,会显示sdb,以此类推,我的是vda,vdb,以自己实际的为主,下面以sda,sdb 讲解 2.添加硬盘3.重 ...
- 【.NET6+WPF+Avalonia】开发支持跨平台的WPF应用程序以及基于ubuntu系统的演示
前言:随着跨平台越来越流行,.net core支持跨平台至今也有好几年的光景了.但是目前基于.net的跨平台,大多数还是在使用B/S架构的跨平台上:至于C/S架构,大部分人可能会选择QT进行开发,或者 ...
- vue3-组件中使用setup函数获取vuex中的数据的新方式
传统方式 setup() { const store = useStore() //传统方式 const aName = computed(() => store.state.name) ret ...
- mysql 创建临时表
创建临时表 create TEMPORARY table SalesSummary( product_name VARCHAR(50) NOT NULL, total_sales DECIMAL( ...
- 详解 Java 内部类
内部类在 Java 里面算是非常常见的一个功能了,在日常开发中我们肯定多多少少都用过,这里总结一下关于 Java 中内部类的相关知识点和一些使用内部类时需要注意的点. 从种类上说,内部类可以分为四类: ...
- Tomcat高级配置(应用场景总结及示例)
前言 本文将解决以下问题: 如何将Linux下任意位置的项目(虚拟目录)部署到tomcat? 如何将项目部署到服务器特定端口? 如何在一个服务器上部署多个web应用? 本例中 系统:Linux ver ...
- Go语言－ import 导入包的语法
一 包的导入语法 在go语言中一个包(文件夹)中可以包含多个 go 文件,每一个文件通过文件第一行的 package 来指明自己所在的包,原则上应该与自己所在的文件夹同名,但也可以指定为其他名称,但同 ...
- BUAA_DS_聊聊链表
幸福穿着节日的盛装欢迎你. --威廉•莎士比亚<罗密欧与朱丽叶> 1. 说在前面 大家在学数组的时候小脑瓜里有没有这样的疑惑:为什么数组必须是定长的?为什么数组开太长会编译错误?数组越界为 ...
- 玩转SpringBoot之定时任务@Scheduled线程池配置
序言 对于定时任务,在SpringBoot中只需要使用@Scheduled 这个注解就能够满足需求,它的出现也给我们带了很大的方便,我们只要加上该注解,并且根据需求设置好就可以使用定时任务了. 但是, ...