当先锋百科网

首页 1 2 3 4 5 6 7
  1. 前端代码
<!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>

隔行变色
编号性别年龄学号成绩号码
001181234100789
00218123599098
00320100398078
00421100489079
  1. 效果图
    在这里插入图片描述