How can I alternate "visible" rows in an html table using jQuery

Question

I have this code that does alternating rows for a html in jQuery:

function AlternateRowColors() {

    $("table.altRow1 tr").filter(function() { 
    return true;
    }).filter(':even').addClass('alt'​​​​​​);

    $("tr.alt td[rowspan]").each(function() {
    $(this).parent().nextAll().slice(0, this.rowSpan - 1).addClass('alt');
    });

    $('ins').css("background-color", "#cfc")
}

This works great (feel free to add suggestions if anything is inefficient above).

The issue that I have now is that I have code that hides a bunch of rows (details on why are not really relevant for this question), the main point is that I want to have a function that can do alternative row colors to current visible rows.

I am hiding rows by simply adding a class to certain rows and them calling .hide() on that class.

Is there any suggestion to get alternative row colors (like the above code) but have it work on the visible rows so no matter what is hidden, the table always looks correct in terms of alt row coloring.

Answer 1

i wound up using this which seemed to work:

function UpdateTable() {
$('table.altRow1 tr:visible').removeClass('odd').filter(':odd').addClass('odd');

with this css:

.altRow1 tr {
     background-color: #FFFFFF;
 }
 .altRow1 tr.odd {
     background-color: #DEDEDE;
 }

Answer 2

I would suggest that you add a class to the visible rows as well in the code that you have to add the class to hidden rows. Say you add the class named visible. Then you can apply your alternating rows code above to the class visible:

 $("table.altRow1 tr.visible").filter(function() { 

and so on.