- 前端代码
<!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>
隔行变色 | 编号 | 性别 | 年龄 | 学号 | 成绩 | 号码 |
|---|
| 001 | 男 | 18 | 1234 | 100 | 789 |
|---|
| 002 | 女 | 18 | 1235 | 99 | 098 |
|---|
| 003 | 男 | 20 | 1003 | 98 | 078 |
|---|
| 004 | 女 | 21 | 1004 | 89 | 079 |
|---|
- 效果图
