Geek Answers Handbook

The fastest way to make striped background color in visible rows of an HTML table

I have an HTML table in which I dynamically add and hide rows, and I want the current set of visible rows to always show with an alternate inverse color for readability.

I have the following code that works fine, but very slow (especially in 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 a faster solution for this above code that applies to visible lines 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), since it makes the report much more difficult to read

+5
6

( , odd, ), , odd.

, , each():

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

CSS 3 (IE9)

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

- (/)

: CSS

- , -

: JQuery DOES

jQuery ( IE 8 CSS3) / ...

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


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

, , , dqtables dquery?

http://www.datatables.net/

+2

. , ,  : http://jsfiddle.net/jomanlk/wTY3p/3/

/ .

#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>
+1

jquery, , ...

, , ( , ) , ? , , .

0

, CSS :

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

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

When you add rows dynamically, you should check if there is an even or odd number of rows and based on this add tr to the correct 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;
});
0
source

This sounds strange, but it can be much faster to change the background colors of the affected lines instead of classes. IE8 and below redraw the entire table each time when any of the row classes changes, but do not change the color of only the color or background.

0
source

More articles:


All Articles