jquery隔行变色

使用 jQuery 实现隔行变色

隔行变色（斑马纹效果）可以通过 jQuery 快速实现，以下是一种常见的方法：

$(document).ready(function() {
    $('tr:odd').css('background-color', '#f2f2f2');
    $('tr:even').css('background-color', '#ffffff');
});

针对表格行的隔行变色

如果需要为表格行添加隔行变色效果，可以这样实现：

$('table tr:nth-child(odd)').addClass('odd-row');
$('table tr:nth-child(even)').addClass('even-row');

对应的 CSS 样式：

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

动态添加行后的隔行变色

当动态添加行时，需要重新应用隔行变色：

function stripeTable() {
    $('table tr').removeClass('odd-row even-row');
    $('table tr:nth-child(odd)').addClass('odd-row');
    $('table tr:nth-child(even)').addClass('even-row');
}

// 添加新行后调用
$('#addRowButton').click(function() {
    $('table').append('<tr><td>New row</td></tr>');
    stripeTable();
});

使用 CSS 伪类实现隔行变色

现代浏览器支持使用 CSS 伪类实现隔行变色，无需 JavaScript：

tr:nth-child(odd) {
    background-color: #f2f2f2;
}
tr:nth-child(even) {
    background-color: #ffffff;
}

兼容性考虑

对于旧版浏览器，jQuery 的隔行变色方法仍然有效。如果需要支持 IE8 及以下版本，jQuery 方法比 CSS 伪类更可靠。