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 ...
随机推荐
- 震撼的Linux全景图：业界成熟的内核架构长什么样？
1)Linux怎么来的? Linus 为了方便访问大学服务器中的资源 ,在自己的机器上写了一个文件系统和硬盘驱动,这样就可以把自己需要的资源下载到自己的机器中.随后linus把这款操作系统雏形开源,成 ...
- python列表的操作(添加）
1. 向列表里面加元素: 向python列表里面添加元素主要有三种方法: (1)append() append()对于列表的操作主要实现的是在特定的列表最后添加一个元素,并且只能一次添加一个元素,并且 ...
- think php 登录 （session+验证码）
..........表单页面 <!DOCTYPE html> {__NOLAYOUT__} <html lang="en"> <head> &l ...
- eval()计算某个字符串,js和jquery都可以使用
实例 执行JavaScript代码或表达式: <script>eval("x=10;y=20;document.write(x*y)");document.write( ...
- php 23种设计模式 - 观察者模式
观察者模式 某个对象可以被设置为是可观察的,只要通过某种方式允许其他对象注册为观察者.每当被观察的对象改变时,会发送信息给观察者. 介绍 意图:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改 ...
- @Autowired @Qualifier @Resource
@Autowired 用于对Bean的属性变量,属性的setter()方法及构造方法进行标注,配合对应的注解处理器完成Bean的自动装配工作.默认按照Bean的类型进行装配. @Resource 其作 ...
- 阿里一面，说说你了解zookeeper的应用场景有哪些？
1.前言 又到了金三银四的时候,大家都按耐不住内心的躁动,我在这里给大家分享下之前面试中遇到的一个知识点(zookeeper应用场景),希望对大家有些帮助.如有不足,欢迎大佬们指点指点. 2.zook ...
- J20航模遥控器开源项目系列教程（五）| 制作STM32F0接收机，8路PWM输出，SBUS输出，PPM输出 | 加密狗无线化，畅玩飞行模拟器
我们的开源宗旨:自由 协调 开放 合作 共享 拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/J ...
- python 包之 xlwt 操作 excel 教程
一.安装 pip install xlwt 二.创建表格并写入 创建表格,设置sheet名称 写入指定行列的数据,将表格进行保存 import xlwt # 创建一个workbook并设置编码 wor ...
- 『忘了再学』Shell基础 — 4、Bash基本功能（history命令）
目录 1.history历史命令 2.设置命令历史记录的条数 3.清空历史命令 4.历史命令的调用 5.命令与文件的补全 在Linux系统中默认的Shell就是Bourne-AgainShell(简称 ...