Alternate row coloring in jquery

Question

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

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

Answer 3

you are inside each loop, do this :

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

       if(index % 2 == 0)
       {
            row.addClass("AltRow");
       }
)};