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 ...
随机推荐
- 【图文并茂】 做开发这么久了，还不会搭建服务器Maven私有仓库？这也太Low了吧
大家好,我是冰河~~ 最近不少小伙伴想在自己公司的内网搭建一套Maven私服环境,可自己搭建的过程中,或多过少的总会出现一些问题,问我可不可以出一篇如何搭建Maven私服的文章.这不,就有了这篇文章嘛 ...
- tensorflow源码解析之distributed_runtime
本篇主要介绍TF的分布式运行时的基本概念.为了对TF的分布式运行机制有一个大致的了解,我们先结合/tensorflow/core/protobuf中的文件给出对TF分布式集群的初步理解,然后介绍/te ...
- Excel用Power Query把文件夹下所有文件合并为一个与合并多个表格
Excel用Power Query把文件夹下所有文件合并为一个与合并多个表格 在 Excel Power Query 未出来之前,把文件夹下所有文件合并为一个与合并同一工作表中的多个工作表,需要用 V ...
- web自动化之selenium(四)元素等待
隐式等待 说明 隐式等待是通过设置一定时长的等待,让页面上的某些元素能过加载出来,如果超过了设置的时间还没有加载出来则抛出(NoSuchelementException异常),默认单位为"秒 ...
- CF1117G题解
题意:区间建笛卡尔树,求每个节点的siz之和. 首先看到笛卡尔树,就应该想到,因为这是一个排列,可以找到通过左边和右边第一个比自己大的元素来"建立"笛卡尔树. 设 \(l(u)\) ...
- 「科技」在线 O(1) 逆元
问题:固定模数 \(p\),多次回答某个数 \(a\) 的逆元.强制在线. 本文提供一个 \(O(p^{\frac{2}{3}})\) 预处理,\(O(1)\) 查询的做法. 首先定义一下 Farey ...
- CSS性能优化的几个技巧
前言 随着互联网发展至今,对于网站来说,性能显的越来越重要了,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验.所以,我们需要重视与CSS相关的性能优化. 项目开发初期我们可能因 ...
- 前端经典面试题vue面试题
1.什么是MVVM? MVVM是一种设计思想. Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑: View 代表UI 组件,它负责将数据模型转化成UI 展现出来,View ...
- docker-compose.yml 版本问题
Docker Engine 与docker-compose version 之间的有以下关系: Compose file format Docker Engine 1 1.9.0+ 2.0 1.10. ...
- 《前端运维》二、Nginx--4代理、负载均衡与其他
一.代理服务 比较容易理解吧,简单来说.客户端访问服务器并不是直接访问的,而是通过中间代理服务器,代理服务器再去访问服务器.就像一个中转站一样,无论什么,只要从客户端到服务器,你就要通过我. 一)正向 ...