jquery入门—选择器实现隔行变色实例代码


当然,这是一个简单的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`选择器来设置奇数行的背景色。如果你也想设置偶数行的背景色,可以取消注释相关行。