internet explorer - jquery :even :odd not working as expected IE10 -

on page table,

in $(document).ready(), have following code:

   populatetable();  // creates , appends tr's table in-memory vars    $("#table1body tr:even").css("background-color", "rgb(181,221,181)");    $("#table1body tr:odd").css("background-color", "rgb(255,255,220)");     

this works expected in firefox, chrome , safari but...

in ie10 few (sometimes none) of table rows alternately colored until move mouse table on screen , out again, in again. first time move mouse table of rows gain correct background color don't. when move mouse out , in again rows correct background.

the populatetable function doesn't ajax or else might cause problem related anynchronous completion, loads in-memory variables 's , appends them . verify this, bundled code function , executed function settimeout 5 second delay - didn't change thing.

any thoughts?

use :nth-child() pseudo selector.

tr:nth-child(odd) {     background-color: rgb(181,221,181); }  tr:nth-child(even) {     background-color: rgb(255,255,220); } 

fiddle: http://jsfiddle.net/sn6r5/

ref: https://developer.mozilla.org/en-us/docs/css/:nth-child

so jquery selector like:

$("#table1body tr:nth-child(odd)").css("background-color", "rgb(181,221,181)");