jQuery实现动态向表中添加行和使用超链接删除行以及行之间颜色交替

    之前一直搞不明白怎样获取动态添加的超链接〈a〉标记,所以转换了一下就轻松得到了。还有就是各行之间的颜色交替显示:

代码如下:

<pre class="html" name="code"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Delete</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
	.bg1{background-color:#9FC}
	.bg2{background-color:#C99}
	.bg3{background-color:#F69}
</style>
<script type="text/javascript">
	$(function(){
		color();
		//点击提交将数据添加到表中去
		$(":button").click(function(){
			$("table:last").append("<tr><td>"+$(':text:first').val()+"</td><td>"+$(':text:eq(1)').val()+"</td><td>"+$(':text:eq(2)').val()+"</td><td><a href='#'>delete</a></td></tr>");
			//这里就要注意每次添加一个行就会给前边的<a>标记注册一个事件,那么越到后面就会越多了,这里需要解决一下
			//这里倏然看不到但是必须给处理一下
			$("a").unbind();
			//当我们点击一次就给<a>标记给注册一个点击移除事件
			delt();
			color();
		});
		//将移除的处理封装成一个方法以便调用
		function delt(){
			$("a").click(function(){
				$(this).remove();//先将这个a标记给移除以做为一个标识
				//找到有空的td的行再给移除,所以输入的数据还需判断不能有空的
				$("table:last tr:has(td:empty())").remove();
				color();
			});
		}
		//可以将table中的行设置一个背景颜色
		function color(){
				$("table:last tr").removeClass();//不管有没有添加先给样式个移除掉
				$("table:last tr:even").addClass("bg1")
				$("table:last tr:odd").addClass("bg2")
				$("table:last tr:first").addClass("bg3")
		}
	});
</script>
</head>
<body>
	<table width="600">
		<tr>
		<td></td>
		<td><center><h3>添加用户<h3></center></td>
		<td></td>
		</tr>
		<tr>
		<td>姓名<input type="text" /></td>
		<td>性别<input type="text" /></td>
		<td>年龄<input type="text" /></td>
		</tr>
		<tr>
		<td></td>
		<td><center><input type="button" value="添加" /></center></td>
		<td></td>
		</tr>
	</table>
	<table width="600" border="1" >
		<tr>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
		<td>操作</td>
		</tr>
	</table>
</body>
</html>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值