Jquery表格隔行变色和鼠标经过高亮 -

xiaozpjava

浏览: 188848 次
性别:
来自: 深圳

最近访客更多访客>>

cht的大摩托

tobedouble

vxnjex

my_hello_world

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Jquery表格隔行变色和鼠标经过高亮

博客分类：

Jquery

Jquery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表格隔行换色和鼠标经过高亮</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.2.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
			$(".stripe tr").mouseover(function() {

						$(this).addClass("over");
					}).mouseout(function() {
						$(this).removeClass("over");
					});
			$(".stripe tr:even").addClass("alt");
		}

)

</script>

<style type="text/css">
/*注意选择器的层叠关系*/
th {
        background:#0066FF;
        color:#FFFFFF;
        line-height:20px;
        height:30px;
}
 
td {
        padding:6px 11px;
        border-bottom:1px solid #95bce2;
        vertical-align:top;
        text-align:center;
}
 
td * {
        padding:6px 11px;
}
 
tr.alt td {
        background:#ecf6fc;  /*这行将给所有的tr加上背景色*/
}
 
tr.over td {
        background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/
}
</style>

</head>
<body>
	<table class="stripe" width="50%" border="0" cellspacing="0"
		cellpadding="0">
		<!--用class="stripe"来标识需要使用该效果的表格-->
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>QQ</th>
				<th>Email</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>陈增鹏</td>
				<td>24</td>
				<td>47353327</td>
				<td>chenzengpeng@hotmail.com</td>
			</tr>
			<tr>
				<td>吴捷康</td>
				<td>25</td>
				<td>376002533</td>
				<td>wujiekangyun@126.com</td>
			</tr>
			<tr>
				<td>蓝舜瀚</td>
				<td>25</td>
				<td>530302367</td>
				<td>lanshunhan@gmail.com</td>
			</tr>
			<tr>
				<td>许境</td>
				<td>23</td>
				<td>31540205</td>
				<td>gl.deng@gmail.com</td>
			</tr>
			<tr>
				<td>邓国梁</td>
				<td>23</td>
				<td>31540205</td>
				<td>gl.deng@gmail.com</td>
			</tr>
			<tr>
				<td>邓国梁</td>
				<td>23</td>
				<td>31540205</td>
				<td>gl.deng@gmail.com</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

分享到：