利用JQuery和JS实现奇偶行背景颜色自定义效果

要实现奇偶行背景颜色自定义的效果，你可以使用jQuery来简化DOM操作。以下是一个简单的示例，展示了如何使用jQuery给表格（`

`）中的奇偶行设置不同的背景颜色。

首先，确保你的HTML文件中已经引入了jQuery库。如果没有，你可以通过添加以下代码到``部分来引入jQuery（请确保替换`https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js`为jQuery的最新CDN链接）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后，你可以使用以下jQuery代码来设置奇偶行的背景颜色：

$(document).ready(function() {
    // 为表格中的每一行设置背景颜色
    $("table tr:odd").css("background-color", "#f2f2f2"); // 奇数行背景色
    $("table tr:even").css("background-color", "#ffffff"); // 偶数行背景色

    // 如果你想要自定义颜色，只需将上述代码中的颜色值替换为你想要的颜色即可
    // 例如，将奇数行背景色设置为"#ffdddd"（浅粉色），偶数行保持白色
    // $("table tr:odd").css("background-color", "#ffdddd");
    // $("table tr:even").css("background-color", "#ffffff");
});

这段代码首先等待文档加载完成（`$(document).ready(function() {...})`），然后选中所有表格（`

`）中的奇数行（`:odd`）和偶数行（`:even`），并分别设置它们的背景颜色。你可以根据需要修改颜色值。

请注意，如果你想要对特定的表格设置背景色，而不是页面上所有的表格，你可以通过给那个表格添加一个类名或ID，并在jQuery选择器中使用这个类名或ID来限定选择范围。例如，如果你的表格有一个类名为`my-table`，你可以这样写：

$("table.my-table tr:odd").css("background-color", "#f2f2f2");
$("table.my-table tr:even").css("background-color", "#ffffff");

---