實現功能：
通常在編輯表格時表格的行數是不確定的，如果一次增加太多行可能導致頁面內容太多，反應變慢；通過此程序實現表格動態增加行，一直保持最下面有多個空白行。
效果：
一：原始頁面
二：表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);
|