原生JS和JQuery动态添加、删除表格行的方法

来源：互联网发布：orange软件官方下载编辑：程序博客网时间：2024/05/21 19:21

本文实例讲述了原生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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>javascript添加行demo</title>
 <script type="text/javascript">
 /**验证表单复选框是否有选择*/
 functionisValidChkSelect(frm){ 
  varchk = frm.chked; 
  if(chk == undefined){ 
  return;
  }
  varlen = frm.chked.length; 
  if(chk.length == undefined){ 
  // 只有一个checkbox 
  if(chk.checked == true) { 
   returntrue;
  }
  }else{ 
  for(vari = 0; i < chk.length; i++) { 
   if(chk[i].checked == true) { 
   returntrue;
   }
  }
  }
  returnfalse;
 }
 /**选择所有文本框*/
 functionselectAll(frm){ 
  for(vari = 0; i < frm.elements.length; i++){ 
  vare = frm.elements[i]; 
  if(e.name != 'chkall'&& e.type == 'checkbox')
   e.checked = frm.chkall.checked; 
  }
 }
 /**添加新行*/
 functionaddNew(){ 
  varobjMyTable = document.getElementById("tbl");
  varindex = objMyTable.rows.length - 1; 
  varnextRow = objMyTable.insertRow(index);// 插入新行 
  varobjCel_0 = nextRow.insertCell(0);// 添加单元格 
  objCel_0.innerHTML = "<input type='checkbox' name='chked' value='' />";
  varobjCel_1 = nextRow.insertCell(1); 
  // nextRow.rowIndex -- 行索引 
  objCel_1.innerHTML = "<input type='text' name='newRow"+nextRow.rowIndex+"' /> <a href='#' onclick='delRow(this)'>删除</a>";
 }
 /**删除行对象*/
 functiondelRow(obj){ 
  //obj.parentNode.parentNode.removeNode(true); // Firefox不兼容 
  varnew_tr = obj.parentNode.parentNode; 
  vartmp = new_tr.parentNode; 
  tmp.removeChild(new_tr);// 删除子节点 
 }
 /**将文本框值赋给同一行对应的复选框*/
 functionsetValue(obj, obj_chk){ 
  obj_chk.value = obj.value; 
 }
 functiondoSubmit(frm){ 
  if(isValidChkSelect(frm) == false){
  alert("选择不能少于一项");
  returnfalse;
  }
  for(vari = 0; i < document.getElementsByTagName("input").length; i++) { 
  varobj = document.getElementsByTagName("input")[i];
  if(obj.type == "text"&& obj.name.substring(0, 6) == "newRow"){
   varobj_chk = obj.parentNode.parentNode.childNodes[0].childNodes[0];// 复选框对象 
   if(valid(obj, obj_chk)){ 
   setValue(obj, obj_chk);// 同一行的文本框值 赋值给 复选框 
   continue;
   }else{ 
   returnfalse;
   }
  }
  }
  returntrue;
 }
 functionvalid(obj, obj_chk){ 
  if(obj_chk.checked){
  varpatrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
  if(obj.value == ""){
   alert("添加的地址不能为空！");
   returnfalse;
  }
  if(!patrn.test(obj.value)){
   alert("请输入正确的邮件地址！");
   returnfalse;
  }
  }
  returntrue;
 }
 </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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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);
  });
 });
 varrow_cur_index = 0;// 插入行的当前索引 
 /**添加新行*/
 functionaddNew(){ 
  varrow_id = "tr"+ row_cur_index;// 所插入行的id 
  varrow_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; 
 }
 /**将文本框值赋给同一行对应的复选框*/
 functionsetValue(row_index, value){ 
  varrow_id = "#tr"+ row_index; 
  $(row_id).find(":checked").val(value);
 }
 /**删除行对象*/
 functiondelRow(row_id){ 
  $(row_id).remove();// 删除匹配row_id的元素 
 }
 functiondoSubmit(frm){ 
  /**判断复选框是否有选*/
  if($("input[name='chked']:checked").size() == 0){ 
  alert("选择不能少于一项");
  returnfalse;
  }
  try{ 
  $("tr[id^='tr']").each(function(){
   vartmp_row_index = this.id.substring(2);// 当前行索引 
   if($("#tr"+tmp_row_index).find(":checkbox").attr("checked")){
   varpatrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; 
   varinput_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("请输入正确的邮件地址！"); 
   returnfalse;
  }
  returntrue;
 }
 </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程序设计有所帮助。

0 0