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 ...
随机推荐
- 矩池云上安装 NVCaffe教程
使用的是P100,cuda11.1base镜像 创建虚拟环境 conda create -n py36 python=3.6 conda deactivate conda activate py36 ...
- javaScript阻止浏览器F5刷新
1 <script type="text/javascript"> 2 //禁止用F5键 3 document.onkeydown = function (e) { 4 ...
- Goland 时间转换的那些事
Goland 时间转换的那些事 在项目的开发过程中遇到的一个很有意思的时间转换问题 例子 假设有一个需求,是从数据库获取到了一个时间,然后需要把时间延后一天,再返回时间戳 得到伪代码 t := &qu ...
- os模块——关于在程序框中如何进行文件的查找和建立新的文件夹
- BSOJ6387题解
算是刷新了我对树上问题的认知 首先第一问随便做一个 \(O(nk)\) 的 DP 就可以草过去,考虑第二问. 我们将问题分为两个部分:走儿子边的答案和走父亲边的答案.最后拼接一下就好了. 设 \(fd ...
- 从原理学习Java反序列化
1 序列化与反序列化 1.1 概念 序列化: 将数据结构或对象转换成二进制串的过程 反序列化:将在序列化过程中所生成的二进制串转换成数据结构或者对象的过程 1.2 使用场景 当你想把的内存中的对象状态 ...
- VTK读取数据
#include <vtkSmartPointer.h> #include <vtkSimplePointsReader.h> #include <vtkPolyData ...
- ArcMap操作随记（5）
1.[栅格转面]等工具的使用 若栅格数据为浮点型,需使用[转为整型]工具,将栅格转为整型,再进行操作. 2.人口密度分布趋势图 使用[核密度分析]工具,也可尝试插值 3.点要素做面 [点集转线][要素 ...
- XML解析与文件存取
using System; using System.IO; using System.Text; using System.Xml; namespace XMLDemo { class Progra ...
- 面板Panel
面板 主要步骤: 1.new一个frame窗口 格式 Frame frame = new Frame() 2.设置窗口的大小.位置.可见性 3.设置frame窗口的布局格式(分为流式布局,东西南北中, ...