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

2010-01-01 Thread Šime Vidas 

 The problem is that jQuery assigns a class of 'roweven' to odd
 numbered tr elements and a class of 'rowodd' to even numbered tr
 elements across all browsers. I've tested this on jQuery 1.3.2 and
 jQuery 1.3.1.

The :even and :odd filters are zero-based, so if you select (in your
example) 10 rows, the 1. row has index 0 and will be matched by
the :even filter, the 2. row has index 1 and will be matched by :odd,
and so on




 script type=text/javascript
 $(document).ready(function() {
         var j = 0;
         var rows = $('#foobar tbody tr:visible');
         for (i = 0; i  rows.length; i++){
                 j++;
                 if (j % 2 == 0) {
                         rows[i].className = 'roweven';
                 }
                 else {
                         rows[i].className = 'rowodd';
                 }
         }});

 /script

I changed these 2 lines...
rows[i].className = 'roweven';
rows[i].className = 'rowodd';

to this:
rows.eq(i).addClass('roweven');
rows.eq(i).addClass('rowodd');

and now it works in IE8

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

2010-01-01 Thread Šime Vidas 
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');
}
});

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

2010-01-01 Thread Paul Kim 
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.vi...@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');
}
});

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

2010-01-01 Thread Šime Vidas 
Well, definitely the shorter version :)
You can put a comment above to remind you that :even and :odd are
tricky

// Remember, :even and :odd are zero-based, so it's reversed
$('#foobar tbody tr:visible:even').addClass('rowodd');
$('#foobar tbody tr:visible:odd').addClass('roweven');

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

2010-01-01 Thread Paul Kim 
Thank you. Have a great New Year.

2010/1/1 Šime Vidas sime.vi...@gmail.com

 Well, definitely the shorter version :)
 You can put a comment above to remind you that :even and :odd are
 tricky

 // Remember, :even and :odd are zero-based, so it's reversed
 $('#foobar tbody tr:visible:even').addClass('rowodd');
 $('#foobar tbody tr:visible:odd').addClass('roweven');

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

2010-01-01 Thread Michael Geary 
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 kimba...@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.vi...@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');
}
});

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

2010-01-01 Thread Šime Vidas 
Nice :)

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

2010-01-01 Thread Karl Swedberg 


On Jan 1, 2010, at 3:53 PM, Michael Geary wrote:


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.


And if you need to support IE6, you might have trouble applying a  
background-color to a tr (I seem to recall having that problem in  
the past). If you do, you could do this instead:


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


--Karl


Karl Swedberg
www.englishrules.com
www.learningjquery.com

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

2010-01-01 Thread Paul Kim 
Thank you all for your helpful suggestions.

On Fri, Jan 1, 2010 at 2:37 PM, Karl Swedberg k...@englishrules.com wrote:


 On Jan 1, 2010, at 3:53 PM, Michael Geary wrote:

 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.


 And if you need to support IE6, you might have trouble applying a
 background-color to a tr (I seem to recall having that problem in the
 past). If you do, you could do this instead:

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


 --Karl

 
 Karl Swedberg
 www.englishrules.com
 www.learningjquery.com