jquery隔行变色

jQuery 隔行变色实现方法

通过 jQuery 可以轻松实现表格或列表的隔行变色效果，增强可读性。以下是几种常见方法：

基础实现方法

使用 :even 和 :odd 选择器分别选中偶数行和奇数行：

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

动态添加行时的处理方法

当表格内容动态变化时，需重新应用样式：

function stripeTable() {
    $("tr").removeClass("even odd");
    $("tr:even").addClass("even");
    $("tr:odd").addClass("odd");
}
// 初始调用
stripeTable();
// 数据更新后调用
$("#refreshBtn").click(stripeTable);

CSS 类方式（推荐）

预定义样式类，通过 jQuery 添加类名：

.even-row { background-color: #f8f8f8; }
.odd-row  { background-color: #ffffff; }

$("tr:even").addClass("even-row");
$("tr:odd").addClass("odd-row");

鼠标悬停效果增强

可结合悬停效果提升交互体验：

$("tr").hover(
    function() { $(this).addClass("hover"); },
    function() { $(this).removeClass("hover"); }
);

注意事项

• 选择器性能：tr:even 比 tr:nth-child(even) 性能更好
• 动态内容：需在 AJAX 加载或 DOM 更新后重新执行染色函数
• 可维护性：推荐使用 CSS 类方式而非直接修改 style