Question

I have a table with active/inactive users, as well as a drop-down that will, once changed, toggle the visibility of active or inactive users. That’s working fine, but I can’t figure out how to keep every other row shaded. I’ve added

$(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");

to the end of each function once the drop-down is changed, but my guess is all rows regardless of visibility are marked as even or odd at the very beginning and do not change based on if they’re visible or not. Thus, every other row is shaded properly when I load the page (on Active filter), but then the shading gets thrown off once I change the drop-down (blocks of rows are shaded).

Code:

$(document).ready(function(){

    // on load, show only active users
    $('#tableUsers tr').each(function(){
                var status = ($(this).attr('id'));
                if (status == 'userInactive'){
                    $(this).hide();
                }
                else if (status == 'userActive'){
                    $(this).show();
                }               
    });

    $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");


    $('#userTypeDropDown').change(function(){
        var option = $(this).val();

        if (option == 'Active'){
            $('#tableUsers tr').each(function(){
                var status = ($(this).attr('id'));
                if (status == 'userInactive'){
                    $(this).hide();
                }
                else if (status == 'userActive'){
                    $(this).show();
                }
            });
            $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");
        }

        if (option  == 'Inactive'){
            $('#tableUsers tr').each(function(){
                var status = ($(this).attr('id'));
                if (status == 'userActive'){
                    $(this).hide();
                }
                else if (status == 'userInactive'){
                    $(this).show();
                }
            });
            $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");
        }

        if (option  == 'Both'){
            $('#tableUsers tr').each(function(){
                    $(this).show();
            });
            $(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");
        }

    });
});

Answer 1

Here’s a working jsfiddle: http://jsfiddle.net/E8wvK/

I completely rewrote the JavaScript to be much less verbose and more efficient.

For posterity here’s the code:

HTML

<select id="show">
    <option value="">All</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
</select>
<table>
    <tr class="active-user"><td>John Doe</td></tr>
    <tr class="active-user"><td>Jane Doe</td></tr>
    <tr class="inactive-user"><td>Tony Stark</td></tr>
    <tr class="active-user"><td>Bruce Wayne</td></tr>
    <tr class="inactive-user"><td>Clark Kent</td></tr>
    <tr class="inactive-user"><td>Lois Lane</td></tr>
    <tr class="active-user"><td>Peter Parker</td></tr>
    <tr class="active-user"><td>Harry Osborne</td></tr>
    <tr class="active-user"><td>Mary Jane Watson</td></tr>
    <tr class="inactive-user"><td>Bruce Banner</td></tr>
</table>

CSS

tr.alt { background:#c0c0c0; }

JS

function toggleRows() {
    var selected = $('#show').val();

    switch (selected) {
        case 'active':
            var $rows = $('.active-user');
            $rows.show();
            $('.inactive-user').hide();
            break;
        case 'inactive':
            var $rows = $('.inactive-user');
            $rows.show();
            $('.active-user').hide();
            break;
        default:
            var $rows = $('tr');
            $rows.show();
    }
    $rows.removeClass('alt').filter(':even').addClass('alt');
}

toggleRows();

$('#show').change(function(){
    toggleRows();
});