Question

我有一张桌子，我试图按动物类型排序。我有这一切都工作，但由于某种原因，行上的条纹搞砸了。我可以在彼此的顶部有2条灰色条纹行。 Jfiddle

$(document).ready(function(){
// Get all the rows for the table
    $upcoming = $('#upcoming_production_sales .table');
    $events = $upcoming.find('tr.event');
    map = {};

    // Find the event category column push into map
    $events.each(function(idx,ele){ 
    diffText = $(ele).find('td.event-category').text();
    diffText = (diffText == undefined || diffText == "" ? "Other" : diffText).toLowerCase();
    if(!map[diffText]){
        map[diffText]=[];
    }
    map[diffText].push(ele);
    });

    // Get keys 
keys=Object.keys(map);
    var filterEvents = function filterEvents(diffText) {
      keys.forEach(function(key, idx, arr) {
        var hideRows = (key.toLowerCase() != diffText.toLowerCase()) && ("all" != diffText.toLowerCase());
        map[key].forEach(function(row, idx, arr) {
          if(hideRows) $(row).hide();
          else $(row).show();
        });
      });
    };




    $("#upcoming_production_sales .all-upcoming-events").click(function(event){
        // Remove active class
    $("#upcoming_production_sales .nav li").removeClass('active');
    // Add active class to clicked event
    $(this).parent().addClass('active');
        filterEvents('all');
        event.preventDefault();
    });

    $("#upcoming_production_sales .cattle-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('cattle');
        event.preventDefault();
    });

    $("#upcoming_production_sales .deer-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    // Add active class to clicked event
    $(this).parent().addClass('active');
        filterEvents('deer');
        event.preventDefault();
    });

    $("#upcoming_production_sales .equine-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('equine');
        event.preventDefault();
    });

    $("#upcoming_production_sales .goat-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('goats');
        event.preventDefault();
    });

    $("#upcoming_production_sales .sheep-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('sheep');
        event.preventDefault();
    });

    $("#upcoming_production_sales .swine-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('swine');
        event.preventDefault();
    });

    $("#upcoming_production_sales .other-upcoming-events").click(function(event){
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
        filterEvents('other');
        event.preventDefault();
    });


});

Answer 1

在页面加载期间，

Bootstrap仅将alt颜色行应用于表行一次。因为在您的情况下，您只是隐藏不相关的行，alt行颜色将不一致。为了解决这个问题，您需要在完成过滤行后回复样式。

  $('.table-striped tr:nth-child(2n) td').css("background-color","#f9f9f9");
      $('.table-striped tr:nth-child(2n+1) td').css("background-color","#ffffff");

以下是工作示例：https://jsfiddle.net/DinoMyte/g4raj5xf/1/

Answer 2

您遇到的问题是因为:nth-child CSS选择器仍会计算隐藏的元素。这意味着您在可见的元素上具有不匹配的条纹。解决方法是使用jQuery的:even和:odd选择器在修改过滤器时应用条带化。

首先，您需要从table-striped中删除table类。然后，您可以添加一个函数来为您划分行。试试这个：

keys = Object.keys(map);
var filterEvents = function(diffText) {
    keys.forEach(function(key, idx, arr) {
        var hideRows = (key.toLowerCase() != diffText.toLowerCase()) && ("all" != diffText.toLowerCase());
        map[key].forEach(function(row, idx, arr) {
            if (hideRows) 
                $(row).hide();
            else 
                $(row).show();
        });
        setStripe(); //when the filter is changed
    });
};

var setStripe = function() {
    $(".table tr:visible:odd").addClass('odd').removeClass('even');
    $(".table tr:visible:even").addClass('even').removeClass('odd');
}
setStripe(); // on load

另请注意，您可以通过使用a属性来干掉过滤器data-*元素上的重复点击处理程序：

<ul class="nav nav-pills">
    <li class="active"><a class="all-upcoming-events" href="#" data-filter="all">All Events <span class='badge'>216</span></a></li>
    <li><a class="cattle-upcoming-events" href="#" data-filter="cattle">Cattle <span class='badge'>177</span></a></li>
    <li><a class="deer-upcoming-events" href="#" data-filter="deer">Deer <span class='badge'>6</span></a></li>
    <li><a class="equine-upcoming-events" href="#" data-filter="equine">Equine <span class='badge'>0</span></a></li>
    <li><a class="goat-upcoming-events" href="#" data-filter="goats">Goats <span class='badge'>10</span></a></li>
    <li><a class="sheep-upcoming-events" href="#" data-filter="sheep">Sheep <span class='badge'>0</span></a></li>
    <li><a class="swine-upcoming-events" href="#" data-filter="swine">Swine <span class='badge'>0</span></a></li>
    <li><a class="other-upcoming-events" href="#" data-filter="other">Other <span class='badge'>23</span></a></li>
</ul>

$("#upcoming_production_sales a").click(function(event) {
    event.preventDefault();
    $("#upcoming_production_sales .nav li").removeClass('active');
    $(this).parent().addClass('active');
    filterEvents($(this).data('filter'));
});

Working example

如何在点击时重置.table-stripe类

2 个答案: