隔行换色（修改版）

最新推荐文章于 2024-12-21 20:06:16 发布

原创最新推荐文章于 2024-12-21 20:06:16 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用CSS为HTML表格实现隔行换色的效果，通过选择奇偶行应用不同背景色，提升表格可读性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style>
			table{
				border:1px solid #ccc;
				font-family:"微软雅黑";
			}
			.qblue{
				background-color: lightyellow;
			}
			.qpink{
				background-color: pink;
			}
			
			.float_color{
				background-color: mistyrose;
			}
			
		</style>
		
		<script>
			$(function(){
				//table表格内部有一个tbody,自动生成,会隐藏,存在
				//$("table > tbody > tr").addClass("qblue");
				//跨层级获取标签  直接加空格
				$("table tr:first").css("background-color","darkcyan");
				//隔行换色添加颜色
				$("table tr:even:gt(0)").addClass("qblue");
				
				$("table tr:odd").addClass("qpink");
				
				//添加小手
				$("table tr").css("cursor","pointer");
				// this:当前对象  绑定事件 dom对象：this  jquery对象：$(this)
				$("table tr:gt(0)").mouseover(function(){
					$(this).addClass("float_color");
					
				});
				//移出事件
				$("table tr:gt(0)").mouseout(function(){
					$(this).removeClass("float_color");
				});
				
				
				
				
			});
			
		</script>
		
	</head>
	<body>
		<center>
			<table border="0px" cellspacing="0" cellpadding="7px" width="500px">
					<!--4*2-->
					<!--tr*4>td*2   快捷键-->
					<tr>
						<th>名称</th>
						<th>爱好</th>
					</tr>
					<tr>
						<td align="center">李逵</td>
						<td>喝酒、赌博、吹牛</td>
					</tr>
					<tr>
						<td align="center">张飞</td>
						<td>喝酒、打骂军士、睁眼睡觉</td>
					</tr>
					<tr>
						<td align="center">孙悟空</td>
						<td>打妖怪、吃桃</td>
					</tr>	
					<tr>
						<td align="center">贾宝玉</td>
						<td>富贵闲人、喜欢各种小姐姐</td>
					</tr>
			</table>
		</center>
	</body>
</html>