原生JS和JQuery动态添加、删除表格行的方法
本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下:
下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除)。
原生态JS版:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>javascript添加行demo</title> <scripttype="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="<inputtype='checkbox'name='chked'value=''/>"; varobjCel_1=nextRow.insertCell(1); //nextRow.rowIndex--行索引 objCel_1.innerHTML="<inputtype='text'name='newRow"+nextRow.rowIndex+"'/><ahref='#'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> <formmethod="post"action=""onsubmit="returndoSubmit(this)"> <tableid="tbl"border="1"cellpadding="4"style="border-collapse:collapse"width="100%"> <tr> <td><inputtype="checkbox"name='chkall'onclick="selectAll(this.form)"/>全部选择</td> <td> 允许发送地址 <ahref="#"onclick="addNew()">添加新地址</a> </td> </tr> <tr> <td> <inputtype="checkbox"name="chked"value="mailfrom@gmail.com"> </td> <td>mailfrom@gmail.com</td> </tr> <tr> <tdcolspan="2"> <inputtype="submit"value="提交"name="B1"> </td> </tr> </table> </form> </body> </html>
JQuery版:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>jQuery添加行demo</title> <scripttype="text/javascript"src="jquery-1.6.4.min.js"></script> <scripttype="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="<trid='"+row_id+"'><td><inputtype='checkbox'class='ck_class'name='chked'value=''/></td><td><inputtype='text'name='newRow"+row_cur_index+"'/><ahref='#'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> <formmethod="post"action=""onsubmit="returndoSubmit(this)"> <tableid="tbl"border="1"cellpadding="4"style="border-collapse:collapse"width="100%"> <tr> <td><inputtype="checkbox"name='chkall'/>全部选择</td> <td> 允许发送地址 <ahref="#"onclick="addNew()">添加新地址</a> </td> </tr> <tr> <td> <inputtype="checkbox"name="chked"value="mailfrom@gmail.com"> </td> <td>mailfrom@gmail.com</td> </tr> <trid="topRow"> <tdcolspan="2"> <inputtype="submit"value="提交"name="B1"> </td> </tr> </table> </form> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。