Shading every other row of table upon showing/hiding certain rows
<p>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 </p>

<p><code>$(this).find("#tableUsers tr").not(":hidden").filter(":even").addClass("altr");</code> </p>

<p>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). </p>

<p>Code:</p>

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

    });
});
</code></pre>
