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

Question

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

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

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

Answer 1

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

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

<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调用可以像上面一样"链接",使用filter()限制所选元素的操作,并.end()"重置"到最后一个选择.换句话说,每个.end()"撤消"前一个.filter().决赛.end()没有结束,因为那之后无事可做.

Answer 3

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

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

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

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