jquery tablesorter插件 - 保留替代的行颜色

I took an html table that I am applying alternative row colors to, and I added jquery table sorter on it so users can sort the table.

我拿了一个html表,我正在应用替代行颜色,并在其上添加了jquery表分类器,以便用户可以对表进行排序。

The issue is that the alternative row colors are all messed up now as (based on the sorting) there are multiple rows with the same background color.

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

Is there any way to reset the alternative row color with jquery table sorter?

有没有办法用jquery表分类器重置替代行颜色?

6 个解决方案

#1

There's already a default widget zebra, built into the core, which applies the classes odd and even to alternate rows. It works whether or not you have added class=even/odd to the html file.

已经有一个内置于核心的默认小部件zebra,它将奇数和偶数类应用于交替行。无论你是否在html文件中添加了class = even / odd,它都能正常工作。

It's really easy to set up. I simply followed the instructions on the table sorter website, and then modified the document ready function to the following:

这很容易设置。我只是按照表格分类器网站上的说明操作,然后将文档就绪功能修改为以下内容:

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

I made an example while answering the question. You can view the result in action, or see the example code.

我在回答这个问题时做了一个例子。您可以查看结果,或查看示例代码。

#2

Based on Anthony's answer, but rephrased as a one-liner (mostly):

根据安东尼的回答,但改为单线(大多数):

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

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

JQuery calls can be "chained" as above, using operations like filter() to limit the selected elements, and .end() to "reset" to the last selection. Put another way, each .end() "undoes" the previous .filter(). The final .end() is left off, since there's nothing to do after that.

JQuery调用可以像上面一样“链接”,使用filter()等操作来限制所选元素,而.end()则“重置”到最后一个选择。换句话说,每个.end()“撤消”前一个.filter()。最后的.end()没有了,因为那之后没什么可做的。

#3

In order to maintain the zebra stripes after a sort has taken place you need to trigger the zebra widget again.

为了在排序发生后保持斑马条纹,您需要再次触发斑马线小部件。

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

This is less of a hack, as you will be reusing the logic of the zebra widget rather than replicating it.

这不是一个hack,因为你将重用zebra小部件的逻辑而不是复制它。

Note: This kind of work-around is only required in instances where the default zebra widget is failing. I have found in most circumstances that this hack is not required as the widget is operating correctly post sort.

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

#4

How about:

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);

Oh, and if you want a really simple fix, you could hold your breath for this CSS pseudo-class to get picked up by all the major browsers:

哦,如果你想要一个非常简单的修复,你可以屏住呼吸这个CSS伪类,以便被所有主流浏览器选中:

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

But my guess is based on how FF and company handle CSS for dynamic HTML, it would set your stripes onload, but not apply the CSS after you sort. But I'd like to know for sure.

但我的猜测是基于FF和公司如何处理动态HTML的CSS,它会设置条带onload,但在排序后不应用CSS。但我想肯定地知道。

#5

Revised and Latest working solution - inbuilt *This will also enable the change of colour on click.*

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

 <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>

Now everything should kick itself out !

现在一切都应该自拔了!

#6

Via your css:

通过你的CSS:

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

#1