Question

I have a HTML table where I am dynamically adding and hiding rows and I want the current set of visible rows to always show with alternative backcolor for easy reading.

I have the following code that works fine functionally, but is really slow (especially on Internet Explorer browsers)

$('table.alternateRow tr:visible').removeClass('odd').filter(':odd').addClass('odd');

here is my css:

.alternateRow tr {
    background-color: #FFFFFF;
}

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

Is there any faster solution for this code above that applies to visible rows but doesn’t freeze in Internet Explorer. My table has about 150 – 200 rows visible

Also, (for certain reasons) I want to avoid paging if possible (as a last resort) as it makes the report much harder to read

Answer 1

The code in your question iterates over the table rows twice (once to remove the odd class, once to filter the rows), then performs a final pass over the filtered rows to add the odd class.

It might be faster to iterate over the rows only once, using each():

$("table.alternateRow tr:visible").each(function(index) {
    var $this = $(this);
    if (index & 1) {
        $this.addClass("odd");
    } else {
        $this.removeClass("odd");
    }
});