1

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

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

对我的 th 进行排序的代码是这样的：

$('.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');                 
 });
4

2 回答 2

4

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

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

$("#mytable").tablesorter({
  widgets: ['zebra']
});
于 2011-06-23T20:06:33.067 回答
0

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

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

于 2011-06-23T20:07:00.303 回答