jquery tablesorter插-保留备选行的颜色

Question

我花了一个html表，我是应用的替代行颜色对，我加入jquery表分类器上，使用户可以排序表。

问题是，替代行颜色都搞砸了现在的(基于排序)有多个行与相同背景的颜色。

是否有任何办法重置的替代行颜色字表选机?

Answer 1

内核中已经有一个默认的小部件zebra，它将类odd和even应用于备用行。无论您是否已将class=even/odd添加到html文件，它都有效。

设置起来非常简单。我只是按照表格分类器网站上的说明进行操作，然后将文档就绪功能修改为以下内容： / p>

<script type="text/javascript">
$(document).ready(function() 
    { 
        $("#myTable").tablesorter({ 
    widgets: ['zebra'] 
    }); 
    } 
); 
</script>

我在回答这个问题时做了一个例子。您可以查看结果的实际操作，或查看示例代码。

Answer 2

根据安东尼的回答，但改编为单线（大多数）：

function fixStripes() {
    $('table tr').removeClass('odd even')
        .filter(':even').addClass('even').end()
        .filter(':odd').addClass('odd');
}

$("table").bind("sort", fixStripes);

JQuery调用可以是<！> quot; chained <！> quot;如上所述，使用filter()等操作来限制所选元素，.end()到<！>“重置<！>”;到最后的选择。换句话说，每个.filter() <！>“撤消<！>”;以前的<=>。最后的<=>没有了，因为在那之后没什么可做的。

Answer 3

为了在排序完成后维护斑马条纹，您需要再次触发斑马纹小部件。

$('#myTable')
.tablesorter({ widgets: ['zebra'] })
.bind('sortEnd', function(){
    $("#myTable").trigger("applyWidgets"); 
});

这不是一个黑客攻击，因为你将重用zebra小部件的逻辑而不是复制它。

注意：只有在默认斑马窗口小部件失败的情况下才需要这种解决方法。我发现在大多数情况下，由于小部件在排序后正确运行，因此不需要此黑客。

Answer 4

如何：

function fixStripes() {
     var i = 0;
     var rowclass;
     $("table tr").each(function() {
          $(this).removeClass("odd even");
          rowclass = (i%2 == 1) ? "odd" : "even";
          $(this).addClass(rowClass);
      });
}

$("table").bind("sort", fixStripes);

哦，如果你想要一个真正简单的解决办法，可以保持你的呼吸这CSS伪类来得到通过所有主要浏览器：

table tr:nth-child(n+1) {
    color: #ccc;
}

但是我的猜测是基于如何FF和公司处理CSS动态HTML，它将设置你的条纹加载，但不适用CSS后排序。但我想知道。

Answer 5

修订和最新的工作解决方案 - 内置 * 这也可以在点击时更改颜色。 *

 <script type="text/javascript">
   $(document).ready(function () {

    $('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] })
                          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });

    $('#tbltable1 tbody tr').live('click', function () {               
                    if ($(this).hasClass('even')) {
                        $(this).removeClass('even');
                        $(this).addClass('ui-selected');
                    }

                    else if ($(this).hasClass('odd')) {
                        $(this).removeClass('odd');
                        $(this).addClass('ui-selected');
                    }
                    else {
                        $(this).removeClass('ui-selected');
                        $(".tablesorter").trigger("update");
                        $(".tablesorter").trigger("applyWidgets");                         
                    }

        });

    });
</script>

现在一切都应该自拔了！

Answer 6

通过你的css：

  table.tablesorter tr:nth-child(even) {
        background-color: #ECFAFF;
    }