原生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程序设计有所帮助。