Re: [jQuery] Re: jQuery does not stripe visible table rows correctly

I wouldn't use either version.

Instead, I would change your CSS from:

tr.rowodd { background-color: #FFF; }
tr.roweven { background-color: #F2F2F2; }

to:

tr { background-color: #FFF; }
tr.roweven { background-color: #F2F2F2; }

and then use just one line of jQuery code:

    $('#foobar tr:visible:odd').addClass('roweven');

Now you're doing only half the work and letting the CSS cacading rules take care of the rest.

-Mike

On Fri, Jan 1, 2010 at 10:38 AM, Paul Kim <kimbaudi@gmail.com> wrote:

Thanks for your reply. Your solution works. I had a feeling that :even and :odd filters are zero-based, but found that to be "odd" in this situation. So now that I have 2 ways to stripe visible table rows using jQuery, which solution do you prefer?

    $('#foobar tbody tr:visible:even').addClass('rowodd');
    $('#foobar tbody tr:visible:odd').addClass('roweven');

or

    $('#foobar tbody tr:visible').each(function(i) {
        if ((i+1) % 2 === 0) {
            $(this).addClass('roweven');
        }
        else {
            $(this).addClass('rowodd');
        }
    });

I guess both solutions work so it really doesn't matter, but which method would you choose? The first solution contains less code but the second solution seems more intuitive.

2010/1/1 Šime Vidas <sime.vidas@gmail.com>

Also, you really don't need two counters (i and j)....

       var rows = $('#foobar tbody tr:visible');

       for (var i = 0; i < rows.length; i++){
               if ((i + 1) % 2 == 0) {

                       rows.eq(i).addClass('roweven');
               }

               else {

                       rows.eq(i).addClass('rowodd');
               }
       }

However, don't use the for loop, you have jQuery's each method...

       $('#foobar tbody tr:visible').each(function(i) {
               if ((i+1) % 2 === 0) {
                       $(this).addClass('roweven');
               }
               else {
                       $(this).addClass('rowodd');
               }
       });