动态添加表格行并验证每列不为空

最新推荐文章于 2024-07-10 16:24:33 发布

yx9o

最新推荐文章于 2024-07-10 16:24:33 发布

阅读量1.9k

点赞数

分类专栏： JQuery Html+JS 文章标签：遍历索引 html js function

本文链接：https://blog.csdn.net/yangxiaovip/article/details/37886331

版权

Html+JS 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

JQuery

5 篇文章 0 订阅

订阅专栏

今天开发中遇到一个情况, 要动态创建一个表格, 表格一行就代表一个实体对象, 每列是对象的属性, 并且可以随便删除和添加行. 然后提交表单时要验证每个每行每列的值都要输入.

解决办法如下:

思路:

创建一个行的模版, 设置一个通用的变量, 然后在添加行的时候就获取这个页面的html代码, 将那个通用的参数替换成一个索引,来创建一个新行, 并将索引存入一个js数组中, 然后要删除行的时候就把数组中对应的索引元素也删除, 最后验证的时候就遍历这个js数组, 然后列名+数组中的元素就可以获得每个单元格的值这样来验证单元格是否为空.

实现:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		var arr = new Array();
		// 添加行索引
		var index = 0;
		var reg = new RegExp("\\globle", "g");	// 在全局找globle的所有存在
		function addRow() {
			var dataTr = $("#data_Tr").html() + ""; 
			var row = $("<tr id='dataTr_" + (index+1) + "'>" + dataTr.replace(reg, (index+1)) + "<tr/>");
			$("#tmpdataTr").after(row);
			arr[index] = (index+1)+'';
			index++;
		}
		
		function deleteRow(rowId) {
			$("#dataTr_" + rowId).remove();
			remove(rowId);
		}
		
		function search(){
			alert('arr数组中的元素是: '+arr);
		}
		
		function foreach(){
			// 遍历arr中的每个元素
			arr.forEach(function(e){
				alert('arr数组中的元素有: '+e);
			});
		}
		
		function validate(){
			// 遍历arr中的每个元素
			/**arr.forEach(function(e){
				// alert('e: '+$('#name_'+e).val());
				var name = $('#name_'+e).val();
				if(null == name || '' == name){
					alert('请输入名字!');
					return false;
				}
				var age = $('#age_'+e).val();
				if(null == age || '' == age){
					alert('请输入年龄');
					return false;
				}
			});*/
		//	arr.reverse(); // 反转元素（最前的排到最后、最后的排到最前）
			for(var key in arr){
				//alert('key: '+ key+' , value: '+arr[key]);
				//alert(arr[key]+': '+$('#name_'+arr[key]).val());
				var name = $('#name_'+arr[key]).val();
				if(null == name || '' == name){
					alert('请输入名字!');
					return false;
				}
				var age = $('#age_'+arr[key]).val();
				if(null == age || '' == age){
					alert('请输入年龄');
					return false;
				}
			}
			alert('提交成功! 提交值是: '+ $('#testForm').serialize());
		}
		
		// 为数组添加一个删除方法, 根据传入的值查询到索引, 利用splice(index, pos)方法进行删除
		// splice(index, pos, [new])第一个参数是要删除或替换的索引, 第二个参数是替换或删除的个数, 第三个参数是要替换成的元素
		function remove(val) {  
			alert('要删除的值是: '+val);
			var index = arr.indexOf(val);  
			alert('要删除值的索引是: '+index);
			if (index > -1) {  
				arr.splice(index, 1);  // 删除索引为index的元素
			}  
		}; 
	</script>
</head>
<body>
	<input type="button" value="查看数组元素" οnclick="search();">
	<input type="button" value="遍历数组元素" οnclick="foreach();">
	<input type="button" value="提交验证" οnclick="validate();">
	<input type="button" value="添加行" οnclick="addRow();">
	<form id="testForm" action="#" method="post">
		<table border="1" cellpadding="0" cellspacing="0">
			<tr id="tmpdataTr">
				<td>名字</td>
				<td>年龄</td>
				<td>操作</td>
			</tr>
		</table>
	</form>
	<table>
		<tr id="data_Tr" style="display: none;">
			<td><input id="name_globle" name="list[globle].name" type="text" /></td>
			<td><input id="age_globle" name="list[globle].age" type="text" /></td>
			<td><input type="button" value="删除行" οnclick="deleteRow('globle');"></td>
		</tr>
	</table>

希望大家提出更好的思路和解决办法, 互相学习.

运行效果: