<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//将数据奇数行背景色设置为pink,偶数行设置为yellow
$(function () {
//1.获取数据奇数行的tr,设置背景色为pink
$("tr:odd").css("backgroundColor","pink")
//2.获取数据偶数行的tr,设置为yellow
$("tr:gt(1):even").css("backgroundColor","yellow")
})
</script>
</head>
<body>
<table border="1px solid black" height="200px" width="500px" align="center">
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
<tr>
<td>数据</td>
<td>数据</td>
<td>数据</td>
</tr>
</table>
</body>
</html>
JQuery 隔行换色
最新推荐文章于 2023-11-14 19:48:16 发布