6

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

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
vinay
  • 999
  • 2
  • 10
  • 19

3 Answers3

15

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; }
thatismatt
  • 9,832
  • 10
  • 42
  • 54
  • Thanks for your reply, but its not working properly. it looks like this http://www.freeimagehosting.net/uploads/da55af5e55.gif – vinay Jun 11 '09 at 10:25
  • 1
    I'd assume that you have some hidden rows which are causing the striping to look wrong. But without seeing your source it is hard to see what's causing that. Using the :visible selector when you are applying the striping might help. – thatismatt Jun 11 '09 at 10:53
  • 1
    Here is some code that will hopefully illustrate my point: http://jsbin.com/iwuqe – thatismatt Jun 11 '09 at 11:02
  • Yes, i have expand and collapse rows, one more thing is i cant assign class only to visible rows, if it expands/collapse then again symmetry will not be there. – vinay Jun 11 '09 at 11:04
  • Unfortunately the only way that I have found of working around this is to reapply the CSS classes after the rows are shown/hidden. – thatismatt Jun 11 '09 at 11:06
2

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

UnkwnTech
  • 88,102
  • 65
  • 184
  • 229
  • this zebra striping will be applicable in my case. If u look that my demo image, it gives an idea. My table has collapse and expand, because of that have color in group. – vinay Jun 11 '09 at 06:53
  • I once heard someone calling it "pajama striping" :-) – Natrium Jun 11 '09 at 07:39
  • I reminded of the quote from Hitchikers' Guide to the Galaxy `Oh, that was easy,' says Man, and for an encore goes on to prove that black is white and gets himself killed on the next zebra crossing.”` – Andras Zoltan May 12 '11 at 20:43
0

you are inside each loop, do this :

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

       if(index % 2 == 0)
       {
            row.addClass("AltRow");
       }
)};
Zorro
  • 175
  • 1
  • 14