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
