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

原创 2013年12月04日 10:27:29

 

<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>

 

<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>

 

 

jquery动态添加或删除表(table)的行(tr)

功能描述:点击表格某一行之后的按钮实现对该行的添加删除操作(实现后为下图) 代码: add tr demo .datatable td { border-bottom:...

转js动态给table添加行(tr)

New Document // Example: obj = findObj("image1"); function findObj(theObj, theDoc) {  v...

table动态添加、删除tr

在Web网页中动态为table添加或删除数据行是很常见的需求,实现这一效果有很多种方法,这里只介绍一种,不过在写这一解决方法的时候我感受到了熟练使用Jquery的重要性。...

jquery 动态添加 tr 到 table

添加用户 添加用户: 姓名:    email:    电话: 提交 姓...
  • EthanQ
  • EthanQ
  • 2012年04月21日 21:42
  • 10065

js动态给table添加/删除tr

New Document // Example: obj = findObj("image1"); function findObj(theObj, theDoc) {  v...

jquery动态往table添加tr

增一年 var i = 0; $(function(){ $("#addYear").click(function(){ v...

使用jquery动态往table添加tr

[html] view plain copy   table cellpadding=10 id="tabId" >           tr>            ...

解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法

本机只有ie7,ff3.5,opera10,测试在这三个环境中测试通过。   在标准DOM中添加元素一般使用appendChild(); 但用js在table中添加行时却失效了。 网上搜了...

如何实现将JS动态添加的TR中的值传到后台中并批量插入

在我的上一篇文章当中,已经在静态页面中实现了JS动态添加删除TR。在实际工作中,更多的是需要将JS所添加的tr中的值保存至数据库中。下面我将介绍在SSH框架中如何实现这一功能需求。(以下均由我所做的实...

指定table 下的tr 實現隔行變色

如下代碼 $(document).ready(function() { $(".color1 tr:even").css('background-color', '#FFFF00')...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动态给table 添加 tr(行),实现添加多个对象
举报原因:
原因补充:

(最多只允许输入30个字)