jquery隔行变色
实现隔行变色的方法
使用jQuery实现表格或列表的隔行变色效果可以通过以下方法完成：
基本实现代码
$(document).ready(function(){
$('tr:even').css('background-color', '#f2f2f2');
$('tr:odd').css('background-color', '#ffffff');
});针对特定表格的实现
如果需要针对特定ID的表格进行隔行变色：
$('#myTable tr:even').css('background-color', '#e6e6e6');
$('#myTable tr:odd').css('background-color', '#f9f9f9');使用CSS类替代直接样式
更推荐的做法是定义CSS类并通过jQuery添加：
.even-row {
background-color: #f5f5f5;
}
.odd-row {
background-color: #ffffff;
}$('tr:even').addClass('even-row');
$('tr:odd').addClass('odd-row');动态内容的处理
对于动态加载的内容，需要在内容加载完成后重新应用隔行变色：
function applyZebraStripe() {
$('tr:even').removeClass('even-row').addClass('even-row');
$('tr:odd').removeClass('odd-row').addClass('odd-row');
}
// 初始加载时调用
applyZebraStripe();
// 动态内容加载后调用
$(document).ajaxComplete(function() {
applyZebraStripe();
});排除表头行的处理
如果表格有表头(th)，可能需要排除第一行：
$('tr:not(:first):even').addClass('even-row');
$('tr:not(:first):odd').addClass('odd-row');注意事项
- 确保jQuery库已正确加载
- 选择器应根据实际HTML结构调整
- 对于大型表格，使用CSS类比直接修改样式性能更好
- 动态内容需要额外的事件处理
