Fastest way to do alternating background color on visible HTML table rows

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

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

With CSS 3 (IE9) you can do the following

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Although this will not take into account visibility - it does give you a useful selector (odd/even)

above: Uses CSS doesn't take into account visibility

Edit - added clarification incase someone doesn't read all the way to the end

below: Uses Jquery DOES take into account visibility

With jQuery (which effectively allows IE 8 and lower to support CSS3) you can put the odd/even part straight into your selector...

$('table.alternateRow tr:visible:even').addClass('even');

edit combined into function

function zebra(){
    $('table.alternateRow tr').removeClass('even', 'odd');
    $('table.alternateRow tr:visible:even').addClass('even');
    $('table.alternateRow tr:visible:odd').addClass('odd');
}

This is maybe off topic but have you seen the jquery datatables plugin?

http://www.datatables.net/

It handles this sort of stuff seemlessly

Your selector seems a bit convoluted. Have a look at what I've done here, it's more concise : http://jsfiddle.net/jomanlk/wTY3p/3/

You basically apply a default and only add the extra class for the even/odd classes.

#table tr {
    background:#aa0000;
    color:#fff;
}

#table tr.even {
    background:#00AA00;
    color:#fff;
}

$('#hide').click(function(){
    var rows = [3, 4, 5];
    for (row in rows) {
        $('#table tr:eq(' + row + ')').hide()
    }
    format() 
});

function format() {
    $('#table tr.even').removeClass('even');
    $('#table tr:even').addClass('even');
}
format() 


<button id='hide'>Hide</button>
<table id='table'>
<tbody>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    <tr><td>one</td><td>Two</td></tr>
    </tbody>
</table>

I don't know jquery so this might be redundant but...

Can't you write your own code that will loop through the rows starting one above (to find out if it is an odd or even row) the highest row made invisible? This means that you won't be looping over all the rows every time a row is hidden or displayed.

As you have shown you've defined CSS this way :

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

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

When you are adding the rows dynamically you should check whether there are even or odd number of rows and based on that add a tr of the right class, something like this :

$('table.alternateRow').append(function(i,h){
    var tr = '<tr';
    if ( $(this).children('tr').size() % 2 == 0 )
        tr += ' class="odd"';
    tr += '></tr>';
    return tr;
});

This sounds strange, but it may be much faster to change the background colors of the affected rows instead of the classes. IE8 and below are re-rendering the entire table every time any of the row's classes change, but do not if only the color or background color changes.