当然,这是一个简单的jQuery入门示例,用于实现表格中隔行变色的效果。以下是一个HTML和jQuery的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 隔行变色示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table id="myTable">
<tr><th>姓名</th><th>年龄</th></tr>
<tr><td>张三</td><td>28</td></tr>
<tr><td>李四</td><td>22</td></tr>
<tr><td>王五</td><td>34</td></tr>
<!-- 更多行数据... -->
</table>
<script>
$(document).ready(function(){
// 使用jQuery的:odd和:even选择器实现隔行变色
// 假设我们要将奇数行(索引从0开始,所以CSS中的odd对应jQuery中的even)设置为浅灰色
$("#myTable tr:even").css("background-color", "#f2f2f2");
// 如果想将偶数行(在CSS中为even,在jQuery中为odd)设置为另一种颜色,可以这样做:
// $("#myTable tr:odd").css("background-color", "#ddd");
});
</script>
</body>
</html>
在这个示例中,我使用了jQuery的`:even`和`:odd`选择器来选择表格中的行,并给它们设置不同的背景色。但请注意,由于jQuery的索引是从0开始的,所以`:even`选择器实际上会选中CSS中的“odd”行(即第1行、第3行等),而`:odd`选择器会选中CSS中的“even”行(即第2行、第4行等)。在上面的代码中,我仅演示了如何使用`:even`选择器来设置奇数行的背景色。如果你也想设置偶数行的背景色,可以取消注释相关行。