jQuery隔行变色

关注

原创最新推荐文章于 2026-06-10 09:09:08 发布 3.8k 阅读 AI 写同款· GEO 优化 ›

使用jQuery实现表格的隔行变色隔行变色是Web开发中常见的需求之一，通过给表格的奇偶行添加不同的背景色，可以增加表格的可读性和美观性。在本文中，我们将介绍如何使用jQuery来实现这个功能。接下来，我们需要给目标表格的奇偶行添加不同的背景色。我们可以使用jQuery的选择器和遍历方法来实现这个功能。首先，我们需要在页面中引入jQuery库。你可以将以上代码复制到你的HTML文件中，并根据需要修改选择器和颜色值来适应你的具体情况。在迭代的过程中，根据行的奇偶性使用。选择器选中了表格中的所有行，并使用。在上面的代码中，我们使用了。阅读详情

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//隔行变色
$(function(){
	$("tr:odd").addClass("odd");
	$("tr:even").addClass("even");
//点击变色 
	$("td").click( function () { 
		$(this).addClass("selected"); 
		});
//光标移入移出变色
$("td").mouseover(function(){
	$(this).addClass("hd");
}).mouseout(function(){
	$(this).removeClass("hd");
});

	});
</script>
<style>
.even{
 background-color:red;
}
.odd{
 background-color:blue;
}
.selected{
 background-color:fuchsia;
}
.hd{
 background-color:yellow;
}
</style>
<body>
<table border="1" width="100%">
		<tr>
			<td>书名</td>
			<td>作者</td>
			<td>点击量</td>
		</tr>
		<tr>
			<td>圣墟</td>
			<td>辰东</td>
			<td>10万</td>
		</tr>
		<tr>
			<td>飞剑问道</td>
			<td>我吃西红柿</td>
			<td>11万</td>
		</tr>
		<tr>
			<td>杀神</td>
			<td>逆苍天</td>
			<td>22万</td>
		</tr>
		<tr>
			<td>龙王传说</td>
			<td>唐家三少</td>
			<td>18万</td>
		</tr>
		<tr>
			<td>斗破苍穹</td>
			<td>天蚕拖豆</td>
			<td>1万</td>
		</tr>
	</table>
</body>
</html>