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

最新推荐文章于 2021-08-22 22:37:02 发布

原创最新推荐文章于 2021-08-22 22:37:02 发布 · 407 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery #ViewUI

Jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用jQuery实现的表格隔行变色及鼠标悬停高亮的方法。通过简单的JavaScript代码和CSS样式设置，可以增强表格的可读性和用户体验。本文详细展示了如何为表格行添加不同颜色，并在鼠标滑过时改变其背景色。

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