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

本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下：
下面HTML代码作用：提交一个表单，将复选框的值提交（复选框的值等于后面的文本框，复选框和文本框处在同一行，可以动态添加和删除）。
原生态JS版：

<！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">/**验证表单复选框是否有选择*/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版：

<！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）; }）;}）;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程序设计有所帮助。