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 ...
随机推荐
- GoLang设计模式21 - 装饰模式
装饰器模式是一种结构型设计模式.通过装饰器模式可以为一个对象添加额外的功能而不需对其作出调整. 还是通过具体的案例来了解装饰器模式:假设我们开了一家披萨店,现在店里主营两款披萨: 素食狂披萨(Vegg ...
- 使用PostgreSQL 脚本导出数据库的DDL
使用PostgreSQL 脚本导出数据库的DDL 本文主要介绍如何使用基于 PostgreSQL pgdump编写的自定义脚本来导出数据库的DDL. 一.文件说明: 1.pgdump基础语句.sql: ...
- 目标检测常用库MMCV安装中遇到的问题总结
我看很多教程说mmcv是只支持linux,支持windows版本较少,所以很难和torch.cuda匹配上,所以报错较多难安装.今天试了一下,遇到的和想到的报错问题基本如下: 一.首先是Microso ...
- TP5实现多文件上传及展示
view层上传: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- rancher更新集群证书
进入rancher 等待更新完成 查看证书到期时间 >>>在rancher容器内部执行查看集群证书信息 for i in ls /var/lib/rancher/k3s/server ...
- 网络编程 并发socketserver
网络编程 并发socketserver ipv4.ipv6 ip协议:规定网络地址的协议 B/S架构 C/S架构 bs是cs的一种 B/S是浏览器和服务端架构 C/S是客户端和服务端架构 osi七层协 ...
- 钓鱼+DNS欺骗学习笔记
钓鱼+DNS欺骗学习笔记 0x00 写在前面 原文链接: http://www.cnblogs.com/hkleak/p/5186523.html 感谢大佬无私教学 0x01 步骤如下 第一步:布置钓 ...
- docker-compose + nginx部署前后端分离的项目
安装docker 安装必要的系统工具 # 更新yum工具 yum update -y # 安装必要的工具 yum install -y yum-utils device-mapper-persiste ...
- Spring Boot 中的监视器是什么？
Spring boot actuator 是 spring 启动框架中的重要功能之一.Spring boot 监视器可帮助您访问生产环境中正在运行的应用程序的当前状态.有几个指标必须在生产环境中进行检 ...
- SpringAOP 失效解决方案、Spring事务失效
SpringAOP 失效解决方案 SpringAOP是基于代理来对目标方法进行增强,但是有的时候又会出现"增强无效"的情况,比如在@Transactional下的某类中的方法内调用 ...