Alternate row coloring in jquery

Question

Hi,

I have a table with expand and collapse of rows, with column sortable. Below is my code, is there is any ways to improve its performance. And read appending complete group of rows into dom improves performance, but if i do out of $.each() loop it throws error. teble demo

var alt = true;
var altSub = true;

$.each(myData, function(index, row) {

    var noRow = $(row).length;
    var firstRow = $(row[0]);

    for (var i=0; i < noRow; i++) {
        if(firstRow.attr('id') == $(row[i]).attr('id')) {
            if(alt == true) {
                firstRow.removeClass("odd").addClass("even");
                alt = !alt;
                altSub = true;
            } else if( alt == false) {
                firstRow.removeClass("even").addClass("odd");
                alt = !alt;
                altSub = true;
            }
        } else {
            if(altSub == true) {
                $(row[i]).removeClass("alt_row_sub").addClass("alt_row_sub2");
                altSub = !altSub;
            } else if( altSub == false) {
                $(row[i]).removeClass("alt_row_sub2").addClass("alt_row_sub");
                altSub = !altSub;
            }
        }
    }
    $table.children('tbody').append(row);
});

link text

Answer 1

Tutorials:Zebra Striping Made Easy from the jQuery is a great tutorial on how to do the zebra striping.

Answer 2

You might find the :even and :odd selectors useful.

You could then use them like this:

$('.stripyTable tr:even').addClass('even');
$('.stripyTable tr:odd').addClass('odd');
$('.stripyTable .submenu tr:even').addClass('alt_row_sub');
$('.stripyTable .submenu tr:odd').addClass('alt_row_sub2');

The other thing to consider is whether you can get the different styling of the subsections just with CSS, then in your JS you only need to worry about applying the odd / even classes. The CSS might look something like:

.odd { background-color: blue; }
.even { background-color: white; }
.sub .odd { background-color: green; }
.sub .even { background-color: yellow; }