Jquery实现表格的隔行换色和鼠标悬停单元格变色

最新推荐文章于 2021-07-24 11:37:00 发布

RayG

最新推荐文章于 2021-07-24 11:37:00 发布

阅读量1.8k

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_41734885/article/details/80735072

版权

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8" />
		<title>使用JQ完成表格的隔行换色</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("tbody tr:even").addClass("even");
				$("tbody tr:odd").addClass("odd");
				$("tbody tr").mouseover(function(){
					$(this).addClass("over");
				}).mouseout(function(){
					$(this).removeClass("over");
				});
			});
		</script>
		<style>
			.even{
				background: yellow;
			}
			.odd{
				background: green;
			}
			.over{
				background-color: red;
			}
			table{
				width: 400px;
				height: 350px;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellpadding="0px" cellspacing="0px" >
			<thead>
				<tr>
					<td>姓名</td>
					<td>年龄</td>
					<td>学号</td>
					<td>成绩</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>张三</td>
					<td>11</td>
					<td>01</td>
					<td>99</td>
				</tr>
				<tr>
					<td>李四</td>
					<td>27</td>
					<td>02</td>
					<td>88</td>
				</tr>
				<tr>
					<td>王伟</td>
					<td>22</td>
					<td>03</td>
					<td>33</td>
				</tr>
				<tr>
					<td>张伟</td>
					<td>22</td>
					<td>04</td>
					<td>22</td>
				</tr>
				<tr>
					<td>张益达</td>
					<td>11</td>
					<td>05</td>
					<td>99</td>
				</tr>
				<tr>
					<td>李文</td>
					<td>14</td>
					<td>06</td>
					<td>66</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

结果：

RayG

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现表格的隔行换色和鼠标悬停单元格变色

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;使用JQ完成表格的隔行换色&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquer
复制链接

扫一扫