jQuery 为表格奇偶行设置背景色

目标效果与核心逻辑

实现表格奇数行和偶数行呈现不同的背景色调，无需手动修改每个 <tr> 标签，而是通过脚本动态绑定样式类。这能显著提升长表格的阅读体验。

操作步骤

第1步：定义 CSS 样式类

首先，在页面头部或外部样式表中编写三个样式类：.odd、.even 和 .selected，用于指定奇数行、偶数行及选中状态的背景颜色。

<style>
.even { background:#FFF38F; }
.odd { background:#FFFFEE; }
.selected { background:#FF9900; }
</style>

第2步：引入 jQuery 并编写脚本

确保页面已加载 jQuery 库。然后在文档就绪事件（$(function(){ ... })）中，获取表格内的所有行元素，并根据其索引奇偶性添加对应的样式类。

<script type="text/javascript">
$(function(){
    // 为奇数行添加 odd 类
    $("tr:odd").addClass("odd");
    // 为偶数行添加 even 类
    $("tr:even").addClass("even");
});
</script>

第3步：HTML 结构准备

创建一个标准的表格结构，其中包含表头（通常不作为内容行处理）和数据行。如果只需对特定表格生效，建议将 jQuery 选择器具体化（如使用 #myTable tr），避免影响全局所有表格。

<table border="1" cellpadding="5" cellspacing="0">
    <thead>
        <tr><th>姓名</th><th>年龄</th><th>职业</th></tr>
    </thead>
    <tbody>
        <tr><td>张三</td><td>25</td><td>工程师</td></tr>
        <tr><td>李四</td><td>30</td><td>设计师</td></tr>
        <tr><td>王五</td><td>28</td><td>产品经理</td></tr>
    </tbody>
</table>

注意事项与排错

选择器范围控制： 上述代码中的 $("tr") 会选取页面上所有的表格行。如果页面中有多个表格，可能会误伤非目标表格。建议为表格添加 ID 或 Class，例如使用 $('#dataTable tr')
来限定作用域。

表头处理： :odd 和 :even 从索引 0 开始计数。如果直接作用于所有 <tr>，第一个行（通常是表头 <thead>）会被视为偶数行（索引0）。如果希望只针对 <tbody> 的行进行着色，应将选择器改为 $('tbody tr:odd')。

性能考量： 对于数据量极大的表格，频繁操作 DOM 可能影响渲染速度。可考虑仅在使用 jQuery 时才生效，或者采用 CSS :nth-child(even) 伪类替代 JS 方案以获得更好的原生性能。

简要总结

通过结合简单的 CSS 类定义与 jQuery 的选择器功能，可以轻松实现表格隔行换色的斑马线效果，既美化了界面又提高了数据的可读性。