如何在使用 jquery 排序时对表格进行排序并保持交替的背景颜色？答案

【问题标题】：How do I sort my table and keep alternating background colors while sorting using jquery?如何在使用 jquery 排序时对表格进行排序并保持交替的背景颜色？
【发布时间】：2016-10-30 22:59:22
【问题描述】：

一旦我开始对列进行排序，我的表格行背景颜色就会出现问题。当我的文档加载时，代码运行如下：

$('tbody tr:even').css('background-color','#F1F1F1');
$('tbody tr:odd').css('background-color','#FFFFF0');

排序我的代码是这样的：

$('.toggle').toggle(function(){
    $(this).css("background-image", "url('desc.gif')");
}, function(){
    $(this).css("background-image", "url('asc.gif')");
});

但是一旦他们开始排序，就会有偶数行相互重叠，奇数行相互重叠。排序时我可以更改行颜色吗？我已经尝试了以下方法，但它不起作用：

$('.toggle').toggle(function(){
   $(this).css("background-image", "url('desc.gif')");
   $('tbody tr:even').css('background-color','#F1F1F1');
   $('tbody tr:odd').css('background-color','#FFFFF0');
 }, function(){
   $(this).css("background-image", "url('asc.gif')");
   $('tbody tr:even').css('background-color','#F1F1F1');
   $('tbody tr:odd').css('background-color','#FFFFF0');                 
 });

【问题讨论】：

我正在使用 jQuery Tablesorter。

标签： jquery sorting background-color tablerow

【解决方案1】：

如果您只使用jQuery Tablesorter，则可以开箱即用地获得排序和斑马条纹。我一直在用它，效果很好。

使用排序设置并保持适当的交替行颜色的表格示例如下：

$("#mytable").tablesorter({
  widgets: ['zebra']
});

【讨论】：

【解决方案2】：

每当有人处理表格排序、分页等问题时，我都会立即将他们转介给DataTables。它在保持您正在寻找的“斑马条纹”布局的同时正确地进行这种排序。我目前在我公司的应用程序中运行它，非常棒。

我总是建议这种方法的原因是为了获得额外的功能。排序、分页、过滤和结果限制，全部通过加载到 dom 的表或通过 JSON 或 AJAX 数据源。另外，添加 ThemeBuilder 以实现快速样式和出色的、良好支持的 CSS，它是一个不容忽视的工具。

【讨论】：