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

来源：互联网发布：淘宝上的柠檬好吗编辑：程序博客网时间：2024/05/18 01:35

过了太久，JQuery都生疏了，闲来没事，写着玩玩。

下面HTML代码作用：提交一个表单，将复选框的值提交（复选框的值等于后面的文本框，复选框和文本框处在同一行，可以动态添加和删除）。

》原生态JS版

<html><head><script type="text/javascript">/**验证表单复选框是否有选择*/function isValidChkSelect(frm){var chk = frm.chked;if(chk == undefined){return;}var len = frm.chked.length;if(chk.length == undefined){// 只有一个checkboxif (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版

<html><head><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;// 所插入行的idvar 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>