动态给table 添加 tr(行),实现添加多个对象

 

<html>
	<head>
		<title>usually function</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<script type="text/javascript" src="jquery-1.4.4.js"></script>
	<body>
		
		<table border="1px" id="targetTable">
			<tr border="1px">
				<td>序号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>生日</td>
				<td>备注</td>
			</tr>
			<tr  id="model" style="display:none" border="1px">
				<td></td>
				<td><input type="text" name="username"></td>
				<td><input type="text" name="age"></td>
				<td><input type="text" name="birthday"></td>
				<td><input type="text" name="note"><span onclick="del(this)">删除</span></td>
			</tr>
		</table>
		
		<br>
		<br>
		
		用户输入表单:
		姓名<input type="text" name="u_username"><br>
		年龄<input type="text" name="u_age"><br>
		生日<input type="text" name="u_birthday"><br>
		备注<input type="text" name="u_note"><br>
		<button onclick="add()" style="font-size:12px">添加</button>
		
	</body>
<html>	

<script>
function del(obj){
	//alert($(obj).closest("tr").attr("outerHTML"));
	//$(obj).closest("tr").attr("outerHTML","")
	$(obj).closest("tr").remove();
	resetSequenceNum();
}

function add(){
	//获取表单的值
	var u_username = $("input[name='u_username']").val();
	var u_age = $("input[name='u_age']").val();
	var u_birthday = $("input[name='u_birthday']").val();
	var u_note = $("input[name='u_note']").val();
	//alert(u_username);
	//判断表单的值是否为空
	if(u_username=="" || u_username==undefined){
		alert("用户姓名不能为空");
		$("input[name='u_username']").focus();
		return false;
	}
	//缓存要赋值的内容,避免多次查询,提高效率
	var trstr = $("#model").attr("outerHTML");
	//alert(trstr);
	//复制最后一行的代码添加到表的最后一行
	$("#targetTable tr").last().after(trstr);
	//$("#targetTable").find("tr").last().after(trstr);
	//让最后一行显示出来,而不是隐藏
	//$("#targetTable tr").last().css("display","block");会出现浏览器兼容的问题,在ff中显示不正常
	$("#targetTable tr").last().css("display","");
	//赋值
	var target = $("#targetTable tr").last().find("td");
	target.find("input[name='username']").val(u_username);
	target.find("input[name='age']").val(u_age);
	target.find("input[name='birthday']").val(u_birthday);
	target.find("input[name='note']").val(u_note);
	
	
	resetValue();

	resetSequenceNum();
}

//清空表单的值
function resetValue(){
	$("input[name='u_username']").val("");
	$("input[name='u_age']").val("");
	$("input[name='u_birthday']").val("");
	$("input[name='u_note']").val("");
}

//重新设置序号
function resetSequenceNum(){
	var num=0;
	$("#targetTable tr").each(function(index,dom){
		if(index!=0){
			$(dom).find("td").first().html(num);
			num++;
		}
	});
}

</script>

 

动态给table 添加 tr(行),实现添加多个对象

<html>
	<head>
		<title>usually function</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<script type="text/javascript" src="jquery-1.4.4.js"></script>
	<body>
		
		<table border="1px" id="targetTable">
			<tr border="1px">
				<td>序号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>生日</td>
				<td>备注</td>
			</tr>
			<tr id="model" border="1px" style="display:none">
				<td></td>
				<td><input type="text" name="username"></td>
				<td><input type="text" name="age"></td>
				<td><input type="text" name="birthday"></td>
				<td><input type="text" name="note"><span onclick="del(this)">删除</span></td>
			</tr>
		</table>
		<button onclick="add()" style="font-size:12px">添加下一行</button><br>
		<button onclick="isnotEmpty()" style="font-size:12px">isEmpty</button>
		
		
	</body>
<html>	

<script>
function del(obj){	
	$(obj).closest("tr").remove();	
	resetSequenceNum();
}

function add(){
	if(isnotEmpty()){
		//缓存要赋值的内容,避免多次查询,提高效率
		var trstr = $("#model").attr("outerHTML");
		//复制最后一行的代码添加到表的最后一行
		$("#targetTable tr").last().after(trstr);
		//让最后一行显示出来,而不是隐藏
		//$("#targetTable tr").last().css("display","block");会出现浏览器兼容的问题,在ff中显示不正常
		$("#targetTable tr").last().css("display","");
		resetSequenceNum();
	}else{
	
	}
	
}

//检查添加的内容不能为空
function isnotEmpty(){
	//缓存要赋值的内容,避免多次查询,提高效率
	var trstr = $("#model").attr("outerHTML");
	//删除第一个tr,也就是模板
	//$("#targetTable tr").first().remove();
	$("#model").remove();
	//alert(trstr);
	
	var flag = true;
	
	$("#targetTable input").each(function(index,ele){
		var obj = $(ele);
		var value = obj.val();
		if(""==value || undefined==value){
			alert(obj.attr("name")+ "为空");
			obj.focus();
			flag = false;
			return false;
		}
	});
	//将模板添加回来
	$("#targetTable tr").first().after(trstr);
	return flag;
}

//重新设置序号
function resetSequenceNum(){
	var num=0;
	$("#targetTable tr").each(function(index,dom){
		if(index!=0){
			$(dom).find("td").first().html(num);
			num++;
		}
	});
}

</script>

 

 

 

你可能感兴趣的:(table)