实现功能：

通常在编辑表格时表格的行数是不确定的，如果一次增加太多行可能导致页面内容太多，反应变慢；通过此程序实现表格动态增加行，一直保持最下面有多个空白行。

效果：

一：原始页面

二：表1增加新行并绑定timepicker

三：表2自动增加行，新行绑定timepicker

HTML源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../Script/jquery-easyui-1.3.2/themes/default/easyui.css" rel="external nofollow" rel="stylesheet" />
<style>
.autoRows{
width: 350px; border:1px green solid;
}
.autoRows tbody tr td{
border-bottom:1px green solid;
margin:0px;
}
.autoRows thead{
background-color:#8ec7d7;
}
.autoRows tfoot {
background-color: #8ec7d7;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" id="table1" class="autoRows">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
<tr>
<th>表头2</th>
<th>表头2</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="Button1" type="button" value="insertAfter" onclick="addrow(this);" /></td>
<td>
<input id="Button3" type="button" value="Clear" onclick="$.fn.tableAutoRow.clearRowData(this, 2, 2, false);" /></td>
<td>
<input id="Text2" type="text" value="aaaa" /></td>
</tr>
<tr>
<td>
<input id="Button2" type="button" value="insertBefore" onclick="$.fn.tableAutoRow.insertRow(this,1,true,false);" /></td>
<td>
<input id="Button4" type="button" value="Reset" onclick="$.fn.tableAutoRow.clearRowData(this, 2, 2, true);" /></td>
<td>
<input id="Text1" name="ttt" type="text" value="asdfasfasfdsd" /></td>
</tr>
<tr>
<td>
<input id="Button5" type="button" value="insertBefore" onclick="$.fn.tableAutoRow.insertRow(this,1,true,false);" /></td>
<td>
<input id="Button6" type="button" value="Reset" onclick="$.fn.tableAutoRow.clearRowData(this, 2, 2, true);" /></td>
<td>
<input id="Text3" type="text" name="Text3" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>表尾1</th>
<th>表尾2</th>
<th>表尾3</th>
</tr>
</tfoot>
</table>
<p style="height:20px;"></p>
<table border="0" cellspacing="0" id="table2" class="autoRows">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
<tr>
<th>表头2</th>
<th>表头2</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="Button7" type="button" value="insertAfter" onclick="addrow(this);" /></td>
<td>
<input id="Button8" type="button" value="Clear" onclick="$.fn.tableAutoRow.clearRowData(this, 2, 2, false);" /></td>
<td>
<input id="Text4" type="text" value="aaaa" /></td>
</tr>
<tr>
<td>
<input id="Button9" type="button" value="insertBefore" onclick="$.fn.tableAutoRow.insertRow(this, 1, true, false);" /></td>
<td>
<input id="Button10" type="button" value="Reset" onclick="$.fn.tableAutoRow.clearRowData(this, 2, 2, true);" /></td>
<td>
<input id="Text5" name="ttt" type="text" value="asdfasfasfdsd" /></td>
</tr>
<tr>
<td>
<input id="Button11" type="button" value="insertBefore" onclick="$.fn.tableAutoRow.insertRow(this, 1, true, false);" /></td>
<td>
<input id="Button12" type="button" value="Reset" onclick="$.fn.tableAutoRow.clearRowData(this, 2, 2, true);" /></td>
<td>
<input id="Text6" type="text" name="Text3" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>表尾1</th>
<th>表尾2</th>
<th>表尾3</th>
</tr>
</tfoot>
</table>
</body>
</html>
<script src="../Script/jquery-1.7.2.min.js"></script>
<script src="../Script/jquery.tableAutoRow.js"></script>
<script src="../Script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script src="../Script/jquery.timepicker.js"></script>
<script type="text/javascript">
$(function () {
$(".autoRows").tableAutoRow(aaa);
function aaa(row) {
$(row).find(':text').timepicker();
}
});
function addrow(obj) {
$.fn.tableAutoRow.insertRow(obj);
}
</script>

JS源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
/// <reference path="jquery-1.7.2.min.js" />
//为表格主体添加单击事件,当单击时添加行数,使表格保持有n个空行
(function ($) {
$.fn.extend({
rowfunction: null,
tableAutoRow: function (newRowFunction) {
rowfunction = newRowFunction;
return $(this).each(function () {
var tb = this;
if (!(this.tagName.toUpperCase() == "TBODY")) {
if (!this.tBodies[0]) {
return;
} else {
tb = this.tBodies[0];
}
}
 
//添加一个隐藏行，后面新增行复制此行
var lastRow = tb.rows[tb.rows.length - 1];
var row = $(lastRow).clone(true, true);
$(row).insertAfter($(tb).find("tr:last")).hide();
 
//为除所有行添加事件，当获得焦点时自动增加新行
for (var i = 0; i < tb.rows.length; i++) {
AddAutoRowsEvent(tb.rows[i]);
}
});
}
});
//自动增加行
function autoRows(e) {
var e = e || event;
var obj = e.target || e.srcElement;
while (obj.tagName != "TR") {
obj = obj.parentNode;
}
var tb = obj.parentNode;
var index = $(obj).index();
var n = 5 - (tb.rows.length - index);
if (n > 0) {
var lastRow = tb.rows[tb.rows.length - 1];
for (var j = 0; j < n; j++) {
var row = $(lastRow).clone(true, true);
//将新行添加到最后一行之前
row.insertBefore($(tb).find("tr:last")).show();
//为新增加的行添加事件
//AddAutoRowsEvent(tb.rows[tb.rows.length - 2]);
//如果有回调函数则执行
if (typeof (rowfunction) == 'function') {
rowfunction(row);
}
}
}
}
 
//为指定行增加事件
function AddAutoRowsEvent(tr) {
//如果是JQuery对象则转为HTML对象
if (tr instanceof jQuery) {
tr = tr[0];
}
 
$(tr).bind('click', autoRows);
var c = tr.cells.length;
for (var j = 0; j < c; j++) {
var childs = tr.cells[j].childNodes;
for (var k = 0; k < childs.length; k++) {
if (childs[k].type == "text" || childs[k].type == "textarea" || childs[k].type == "button") {
$(childs[k]).bind('focus', autoRows);
}
}
}
}
 
//在表格中指定位置插入指定行数,新插入的行内容为同一表格主体最后一行
//obj:行内的任意对象
//n:要增加的行数
//bAutoRows:是否要添加自动增加行的属性
$.fn.tableAutoRow.insertRow = function (obj, n, bAutoRows, isInsertAfter) {
var loop = 0; //加入循环次数，防止死循环
while (obj.tagName != "TR" && loop < 10) {
obj = obj.parentNode;
loop++;
}
if (obj.tagName != "TR") {
return;
}
var tb = obj.parentNode;
switch (arguments.length) {
case 3:
var isInsertAfter = true;
case 2:
var bAutoRows = true;
var isInsertAfter = true;
case 1:
var bAutoRows = true;
var isInsertAfter = true;
var n = 1;
}
for (var i = 0; i < n; i++) {
var lastRow = tb.rows[tb.rows.length - 1];
 
var row = $(lastRow).clone(true, true);
//将新行添加到当前行之前/后
if (isInsertAfter) {
row.insertAfter(obj).show();
} else {
row.insertBefore(obj).show();
}
if (bAutoRows) {
AddAutoRowsEvent(row);
}
}
}
//清除指定行数据
//obj为行或者行内的节点
//startColnum:起始列
//endColumn:终止列
//isReset:是否恢复到初始值
$.fn.tableAutoRow.clearRowData = function (obj, startColnum, endColumn, isReset) {
var loop = 0; //加入循环次数，防止死循环
while (obj.tagName != "TR" && loop < 10) {
obj = obj.parentNode;
loop++;
}
if (obj.tagName != "TR") {
return;
}
var cellsCount = obj.cells.length; //此行单元格总数
if (startColnum < 0 || !startColnum) { //如果未指定清除起始列则从第一列清除
startColnum = 0;
}
if (endColumn > cellsCount - 1 || !endColumn) { //如果未指定清除终止列则清除到最后一列前(通常最后一列用于放置清除按钮)
endColumn = cellsCount - 1;
}
if (isReset == undefined) {
isReset = false;
}
for (var c = startColnum; c <= endColumn; c++) //循环各列,设置单元格里的控件值
{
for (var j = 0; j < obj.cells[c].childNodes.length; j++) { //循环处理指定单元格中的子节点
var node = obj.cells[c].childNodes[j];
setObjData(node, isReset);
}
}
};
function setObjData(node, isReset) {
switch (node.type) {
case "text":
case "hidden":
case "textarea":
if (isReset) {
node.value = node.defaultValue;
} else {
node.value = "";
}
break;
 
case "select-one":
case "select-multiple":
if (isReset) {
for (var k = node.options.length - 1; k >= 0; k--) {
node.options[k].selected = node.options[k].defaultSelected;
}
} else {
for (var k = node.options.length - 1; k >= 0; k--) {
//node.options.remove(k);
node.options[k].selected = false;
}
}
break;
case "checkbox":
case "radio":
if (isReset) {
node.checked = node.defaultChecked;
} else {
node.checked = false;
}
break;
}
if (node.childNodes && node.childNodes.length > 0) {
var l = node.childNodes.length;
for (var i = 0; i < l; i++) {
setObjData(node.childNodes[i], isReset);
}
}
}
})(jQuery);

JQuery实现表格动态增加行并对新行添加事件的更多相关文章

  1. JQuery实现表格自动增加行，对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

  2. GridView动态增加行

    GridView动态增加行GridView动态增加行 很多时候,我们需要可编辑的表格,来比较方便的进行数据的录入,比如学习成绩的录入.当然这就要求能够动态的增加行,来一次性录入多个学生的信息.现在用A ...

  3. js 动态增加行删除行

    <body> <table id="tableID" border="1" align="center" width=&q ...

  4. datatable的部分问题处理(动态定义列头，给某行添加事件，初始显示空数据)

    一.动态定义列头 在ajax中,用datatable再去重新配置列头,当然传回的数据中,要有对应放列头的键值对 我自定义了Mock数据,用于前端自己交互. 其中,rowdata用于存放传回的数据,co ...

  5. jquery表格动态增删改及取数据绑定数据完整方案

    一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...

  6. JQUERY方法给TABLE动态增加行

    比如设置table的id为tabvar trHTML = "<tr><td>...</td></tr>"$("#tab&q ...

  7. 基于jquery的表格动态创建，自动绑定，自动获取值

    最近刚加入GUT项目,学习了很多其他同事写的代码,感觉受益匪浅. 在GUT项目中,经常会碰到这样一个问题:动态生成表格,包括从数据库中读取数据,并绑定在表格中,以及从在页面上通过jQuery新增删除表 ...

  8. jquery实现表格动态添加

    //点击追加触发$(function(){$("#button").click(function(){var div_ = $("#sel").val();va ...

  9. C#点击按钮用DataGridView动态增加行、删除行，增加按钮列

    原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView( ...

随机推荐

  1. Python 入门 之 类的约束以及super()剖析

    Python 入门 之 类的约束以及super()剖析 1.类的约束 第一版: class WechatPay: def pay(self): print("微信支付") clas ...

  2. MacOS上安装Anaconda+Pycharm+TensorFlow+Keras

    一.安装Anaconda 登录https://www.anaconda.com/download/#macos,下载Anaconda3-5.3.1-MacOSX-x86_64.pkg 二.安装Pych ...

  3. python多进程，并获取每个进程的返回值

    pool = multiprocessing.Pool(processes=10) row = [...] for row in rows: task_id = row[1] img_id = row ...

  4. Codeforces 1190D. Tokitsukaze and Strange Rectangle

    传送门 注意到矩形往上是无限的,考虑把点按 $y$ 从大到小考虑 对于枚举到高度为 $h$ 的点,设当前高度大于等于 $h$ 的点的所有点的不同的 $x$ 坐标数量为 $cnt$ 那么对于这一层高度 ...

  5. python的Email提醒

    目的意义 使用Email自动发送,有利于实时获取爬取信息,更方便的掌握要闻. 导入相关库 MINEText库定义了发送信息, Header定义了发送的主题 formate定义了收件人和发件人的格式信息 ...

  6. requests与BeautifulSoup

    requests模块: 1.安装:pip install requests 2.使用request发送get请求: import requests paras = { 'k1':'c1', 'k2': ...

  7. O014、云计算与OpenStack

    参考https://www.cnblogs.com/CloudMan6/p/5334760.html   云计算 基本概念   所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发 ...

  8. 精通shell编程--最后的总结

    不得不说shell语法是丑陋的,操作是简单高效的,最后一次学习总结shell shell总结 字符串删除与替换等常见操作 ## 字符串长度 a=1234 echo "${#a}" ...

  9. microsoft office powerpoibt automation 二次开发

    背景 首先office的产品powerpoint是支持二次开发的,这里的二次开发并不是指在powerpoint产品中嵌入一些自己的控件,而是一些简单的automation的控制(进入放映状态,上一页, ...

  10. springboot启动端口占用问题,报错org.apache.catalina.LifecycleException: Protocol handler start failed

    解决办法,找到被占用的端口