本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下：
下面HTML代码作用：提交一个表单，将复选框的值提交（复选框的值等于后面的文本框，复选框和文本框处在同一行，可以动态添加和删除）。
原生态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
|
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>javascript添加行demo</title>
<script type=
"text/javascript"
>
/**验证表单复选框是否有选择*/
function
isValidChkSelect(frm){
var
chk = frm.chked;
if
(chk == undefined){
return
;
}
var
len = frm.chked.length;
if
(chk.length == undefined){
// 只有一个checkbox
if
(chk.checked ==
true
) {
return
true
;
}
}
else
{
for
(
var
i = 0; i < chk.length; i++) {
if
(chk[i].checked ==
true
) {
return
true
;
}
}
}
return
false
;
}
/**选择所有文本框*/
function
selectAll(frm){
for
(
var
i = 0; i < frm.elements.length; i++){
var
e = frm.elements[i];
if
(e.name !=
'chkall'
&& e.type ==
'checkbox'
)
e.checked = frm.chkall.checked;
}
}
/**添加新行*/
function
addNew(){
var
objMyTable = document.getElementById(
"tbl"
);
var
index = objMyTable.rows.length - 1;
var
nextRow = objMyTable.insertRow(index);
// 插入新行
var
objCel_0 = nextRow.insertCell(0);
// 添加单元格
objCel_0.innerHTML =
"<input type='checkbox' name='chked' value='' />"
;
var
objCel_1 = nextRow.insertCell(1);
// nextRow.rowIndex -- 行索引
objCel_1.innerHTML =
"<input type='text' name='newRow"
+nextRow.rowIndex+
"' /> <a href='#' onclick='delRow(this)'>删除</a>"
;
}
/**删除行对象*/
function
delRow(obj){
//obj.parentNode.parentNode.removeNode(true); // Firefox不兼容
var
new_tr = obj.parentNode.parentNode;
var
tmp = new_tr.parentNode;
tmp.removeChild(new_tr);
// 删除子节点
}
/**将文本框值赋给同一行对应的复选框*/
function
setValue(obj, obj_chk){
obj_chk.value = obj.value;
}
function
doSubmit(frm){
if
(isValidChkSelect(frm) ==
false
){
alert(
"选择不能少于一项"
);
return
false
;
}
for
(
var
i = 0; i < document.getElementsByTagName(
"input"
).length; i++) {
var
obj = document.getElementsByTagName(
"input"
)[i];
if
(obj.type ==
"text"
&& obj.name.substring(0, 6) ==
"newRow"
){
var
obj_chk = obj.parentNode.parentNode.childNodes[0].childNodes[0];
// 复选框对象
if
(valid(obj, obj_chk)){
setValue(obj, obj_chk);
// 同一行的文本框值 赋值给 复选框
continue
;
}
else
{
return
false
;
}
}
}
return
true
;
}
function
valid(obj, obj_chk){
if
(obj_chk.checked){
var
patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if
(obj.value ==
""
){
alert(
"添加的地址不能为空！"
);
return
false
;
}
if
(!patrn.test(obj.value)){
alert(
"请输入正确的邮件地址！"
);
return
false
;
}
}
return
true
;
}
</script>
</head>
<body>
<form method=
"post"
action=
""
onsubmit=
"return doSubmit(this)"
>
<table id=
"tbl"
border=
"1"
cellpadding=
"4"
style=
"border-collapse: collapse"
width=
"100%"
>
<tr>
<td><input type=
"checkbox"
name=
'chkall'
onclick=
"selectAll(this.form)"
/>全部选择</td>
<td>
允许发送地址
<a href=
"#"
onclick=
"addNew()"
>添加新地址</a>
</td>
</tr>
<tr>
<td>
<input type=
"checkbox"
name=
"chked"
value=
"mailfrom@gmail.com"
>
</td>
<td>mailfrom@gmail.com</td>
</tr>
<tr>
<td colspan=
"2"
>
<input type=
"submit"
value=
"提交"
name=
"B1"
>
</td>
</tr>
</table>
</form>
</body>
</html>
|
JQuery版：
|
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
|
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>jQuery添加行demo</title>
<script type=
"text/javascript"
src=
"jquery-1.6.4.min.js"
></script>
<script type=
"text/javascript"
>
$(
"document"
).ready(
function
(){
// 全部选择的点击事件
$(
"input[name='chkall']"
).click(
function
(){
$(
"input[name='chked']"
).attr(
"checked"
,
this
.checked);
});
});
var
row_cur_index = 0;
// 插入行的当前索引
/**添加新行*/
function
addNew(){
var
row_id =
"tr"
+ row_cur_index;
// 所插入行的id
var
row_obj =
"<tr id='"
+row_id+
"'><td><input type='checkbox' class='ck_class' name='chked' value='' /></td><td><input type='text' name='newRow"
+row_cur_index+
"' /> <a href='#' onclick='delRow("
+row_id+
")'>删除</a></td></tr>"
;
$(
"#topRow"
).before(row_obj);
// 插入行
row_cur_index = row_cur_index + 1;
}
/**将文本框值赋给同一行对应的复选框*/
function
setValue(row_index, value){
var
row_id =
"#tr"
+ row_index;
$(row_id).find(
":checked"
).val(value);
}
/**删除行对象*/
function
delRow(row_id){
$(row_id).remove();
// 删除匹配row_id的元素
}
function
doSubmit(frm){
/**判断复选框是否有选*/
if
($(
"input[name='chked']:checked"
).size() == 0){
alert(
"选择不能少于一项"
);
return
false
;
}
try
{
$(
"tr[id^='tr']"
).each(
function
(){
var
tmp_row_index =
this
.id.substring(2);
// 当前行索引
if
($(
"#tr"
+tmp_row_index).find(
":checkbox"
).attr(
"checked"
)){
var
patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var
input_value = $(
"input[name='newRow"
+tmp_row_index+
"']"
).val();
// 文本框值
setValue(tmp_row_index,
this
.value);
if
(input_value ==
""
)
throw
"Err1"
;
if
(!patrn.test(input_value))
throw
"Err2"
;
}
});
}
catch
(e) {
if
(e ==
"Err1"
)
alert(
"添加的地址不能为空！"
);
if
(e ==
"Err2"
)
alert(
"请输入正确的邮件地址！"
);
return
false
;
}
return
true
;
}
</script>
</head>
<body>
<form method=
"post"
action=
""
onsubmit=
"return doSubmit(this)"
>
<table id=
"tbl"
border=
"1"
cellpadding=
"4"
style=
"border-collapse: collapse"
width=
"100%"
>
<tr>
<td><input type=
"checkbox"
name=
'chkall'
/>全部选择</td>
<td>
允许发送地址
<a href=
"#"
onclick=
"addNew()"
>添加新地址</a>
</td>
</tr>
<tr>
<td>
<input type=
"checkbox"
name=
"chked"
value=
"mailfrom@gmail.com"
>
</td>
<td>mailfrom@gmail.com</td>
</tr>
<tr id=
"topRow"
>
<td colspan=
"2"
>
<input type=
"submit"
value=
"提交"
name=
"B1"
>
</td>
</tr>
</table>
</form>
</body>
</html>
|
希望本文所述对大家的javascript程序设计有所帮助。
扫一扫
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
