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

最新推荐文章于 2022-08-13 18:59:12 发布

哖--少才輕狂

最新推荐文章于 2022-08-13 18:59:12 发布

阅读量892

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/lqwlb/article/details/41820699

版权

之前一直搞不明白怎样获取动态添加的超链接〈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>