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

最新推荐文章于 2023-08-13 16:42:36 发布

jayqean

最新推荐文章于 2023-08-13 16:42:36 发布

阅读量7.7k

点赞数

分类专栏： JS 文章标签： jquery input function border action firefox

本文链接：https://blog.csdn.net/jayqean/article/details/7083982

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

过了太久，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){
				// 只有一个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='#' οnclick='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="" οnsubmit="return doSubmit(this)">
		<table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%">
			<tr>
				<td><input type="checkbox" name='chkall' οnclick="selectAll(this.form)"/>全部选择</td>
				<td>
					允许发送地址 
					<a href="#" οnclick="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;// 所插入行的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='#' οnclick='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="" οnsubmit="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="#" οnclick="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>

jayqean

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生态JS和JQuery版的动态添加、删除表格行

过了太久，JQuery都生疏了，闲来没事，写着玩玩。下面HTML代码作用：提交一个表单，将复选框的值提交（复选框的值等于后面的文本框，复选框和文本框处在同一行，可以动态添加和删除）。》原生态JS版 /**验证表单复选框是否有选择*/ function isValidChkSelect(frm){ var chk = frm.chked; if(ch
复制链接

扫一扫