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

时间:2015-12-17 17:55:09

标签: jquery html css dom

好的,这是对我要做的事情的澄清。我有一张桌子,我试图按动物类型排序。我有这一切都工作,但由于某种原因,行上的条纹搞砸了。我可以在彼此的顶部有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();
    });


});

0 个答案:

没有答案