CODEWITHSUNDEEP
jquery
Tim H
Tim H

Reputation: 205

Shading every other row of table upon showing/hiding certain rows

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");
        }

    });
});

Upvotes: 1

Views: 387

Answers (3)

Chris Pratt
Chris Pratt

Reputation: 239290

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();
});

Upvotes: 1

Keith.Abramo
Keith.Abramo

Reputation: 6955

$(this).find("#tableUsers tr")
    .not(":hidden")
    .filter(function(index){
        return index % 2 === 0;
    })
    .addClass("altr");

I haven't tested this but you could try this approach. pass in a function and check if the index of the resulting selection is even or odd and apply the class accordingly

Upvotes: 1

Tim Banks
Tim Banks

Reputation: 7179

Would you mind sharing your markup from your table?

It looks like you are looping through your tr elements and accessing the "id" attribute. Each id attribute should be unique and in your case you will have multiple tr elements with the id value of "userInactive" and "userActive".

Upvotes: 1

Related Questions