jQuery实现table隔行变色、鼠标移上变色、全选取消全选反选

bepatient

浏览: 195321 次
性别:
来自: 杭州

最近访客更多访客>>

xiaoyuecsdn

xuwenyan

zcyrg1s

zty461217

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery CSS ITeye XHTML HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table {
	width:100%;
}
table, td {
	border:1px solid #ccc;
	border-collapse:collapse;
	height:30px;
}
td {
	width:20%;
}
</style>
<script src="jquery.js"></script>
<script>
$(function(){
	//隔行改变背景色
	$("tr:odd").css("background-color", "#e5e5e5");
	//全选
	$("#selAll").click(function(){
		$(":checkbox").attr("checked", "checked");
	});
	//反选
	$("#selRev").click(function(){
		$(":checkbox").each(function(){
			$(this).attr("checked", !$(this).attr("checked"));
		});
	});
	//取消全选
	$("#selCancel").click(function(){
		$(":checkbox").attr("checked", "");
	});
	//选中当前行的checkbox
	$("tr:odd").each(function(){
		$(this).click(function(){
			var e = $(this).children("td").children(":checkbox");
			if(e[0].checked) {
				e.attr("checked", "");
			} else {
				e.attr("checked", "checked");
			}
		});
		$(this).hover(function(){
			$(this).css("background-color", "#FFE1FF");
		}, function(){
			$(this).css("background-color", "#e5e5e5");
		});
	})
	
	$("tr:even").each(function(){
		$(this).click(function(){
			var e = $(this).children("td").children(":checkbox");
			if(e[0].checked) {
				e.attr("checked", "");
			} else {
				e.attr("checked", "checked");
			}
		});
		$(this).hover(function(){
			$(this).css("background-color", "#FFE1FF");
		}, function(){
			$(this).css("background-color", "#fff");
		});
	})
	
	$(":checkbox").click(function(){
		$(this).attr("checked") ? $(this).attr("checked", false) : $(this).attr("checked", true);
	});
})
</script>
</head>

<body>
<table>
	<tr>
		<td><input type="checkbox" /></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td><input type="checkbox" /></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td><input type="checkbox" /></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td><input type="checkbox" /></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td><input type="checkbox" /></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td><input type="checkbox" /></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td><input type="checkbox" /></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td><input type="checkbox" /></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>
<p align="center">
	<button id="selAll">全选</button>
	<button id="selRev">反选</button>
	<button id="selCancel">取消全选</button>
</p>
</body>
</html>

实用，转自：http://www.iteye.com/topic/1052803。

分享到：