14

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

问题是替代行颜色现在都搞砸了，因为（基于排序）有多行具有相同的背景颜色。

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

4

6 回答 6

49

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

设置起来真的很容易。我只是按照表格排序网站上的说明进行操作，然后将文档准备功能修改为以下内容：

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

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

于 2009-09-29T03:35:39.897 回答
6

基于安东尼的回答，但改写为单行（主要）：

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()被搁置了，因为在那之后没有什么可做的。

于 2009-09-29T03:12:25.017 回答
5

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

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

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

注意：只有在默认 zebra 小部件出现故障的情况下才需要这种解决方法。我发现在大多数情况下不需要这种 hack，因为小部件在排序后正确运行。

于 2011-05-17T18:22:45.040 回答
1

怎么样：

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 和公司如何处理动态 HTML 的 CSS，它将设置你的条纹加载，但在你排序后不应用 CSS。但我想确定一下。

于 2009-09-29T02:58:31.783 回答
1

修订和最新的工作解决方案 - 内置 *这也将启用点击颜色的变化。*

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

现在一切都应该自行解决了！

于 2013-06-26T13:14:49.833 回答
0

通过你的CSS：

  table.tablesorter tr:nth-child(even) {
        background-color: #ECFAFF;
    }
于 2016-05-03T11:08:41.173 回答