JQuery 实现隔行变色效果

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

Oscar不是秃头Boy

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

阅读量689

点赞数

分类专栏：前端效果文章标签： jquery

本文链接：https://blog.youkuaiyun.com/m0_50873883/article/details/118915733

版权

前端效果专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用JQuery为HTML表格实现隔行变色的效果，通过选择器和CSS样式，使得表格数据更易阅读。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>隔行变色</title>
	</head>
	<body>
		<table border="1px solid #ccc" cellpadding="0" cellpadding="0">
			<thead>
				<tr>
					<th>编号</th>
					<th>性别</th>
					<th>年龄</th>
					<th>学号</th>
					<th>成绩</th>
					<th>号码</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>001</th>
					<th>男</th>
					<th>18</th>
					<th>1234</th>
					<th>100</th>
					<th>789</th>
				</tr>
				<tr>
				<th>002</th>
				<th>女</th>
				<th>18</th>
				<th>1235</th>
				<th>99</th>
				<th>098</th>
				</tr>
				<tr>
				<th>003</th>
				<th>男</th>
				<th>20</th>
				<th>1003</th>
				<th>98</th>
				<th>078</th>
				</tr>
				<tr>
				<th>004</th>
				<th>女</th>
				<th>21</th>
				<th>1004</th>
				<th>89</th>
				<th>079</th>
				</tr>
			</tbody>
		</table>
		<script src="../js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
		   $("table tbody tr:odd").css("background","blue");
		   $("table tbody tr:even").css("background","red");
		</script>
	</body>
</html>