jQuery odd even problem

Question

Hi,

I am using below code to apply different background color to odd and even rows:

$('#tbl tr:odd').css('background-color', '#ECF6FC');
$('#tbl tr:even').css('background-color', '#ffffff');

But odd and even rows show up differently in FF and IE, for example:

FF:

IE:

As can be seen, in FF, first row turns out to be white while in IE the first row turns out to be blue. Why it is happening, what is the fix for this?

Answer 1

try

$('#tbl tr:nth-child(odd)').css('background-color', '#ECF6FC'); 
$('#tbl tr:nth-child(even)').css('background-color', '#ffffff');

it should work

Answer 2

There must be some issue in your markup that jquery is having issues with. Could you perhaps paste the html or try to recreate the issue at jsfiddle

Here is a simple working demo which works the same x-browser

The odd/even selectors work the same x-browser so either you may have invalid markup, could you try to validate it at w3c.

Answer 3

this is intresting, since JS is a zero-index lang..

could you try

 $("#tbl tr:nth-child(even)").css("background-color", "#fff");
 $("#tbl tr:nth-child(odd)").css("background-color", "#ecf6fc");

please?

i`d rather like to see if IE handles it the same.