1

On a page with a table,

In $(document).ready(), I have the following code:

   populateTable();  // creates and appends TR's to the table from 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 as expected in Firefox, Chrome and Safari but...

In IE10 only a few (sometimes none) of the table rows are alternately colored UNTIL I move the mouse into the table on screen and out again, then in again. The first time I move the mouse into the table some of the rows gain the correct background color but some don't. When I move the mouse out and back in again all the rows get the correct background.

The populateTable function doesn't do any ajax or anything else that might cause a problem related to anynchronous completion, it simply loads in-memory variables into 's and appends them to . To verify this, I bundled the code into a function and executed the function from a setTimeout with a 5 second delay - this didn't change a thing.

Any thoughts?

4

2 回答 2

5

使用:nth-child()伪选择器。

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

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

小提琴：http: //jsfiddle.net/Sn6R5/

参考：https ://developer.mozilla.org/en-US/docs/CSS/:nth-child

因此，您的 jQuery 选择器将类似于：

$("#table1Body tr:nth-child(odd)").css("background-color", "rgb(181,221,181)");
于 2013-05-06T03:28:49.580 回答
0

您在第一rgb()行缺少括号。

尝试这个。

populateTable();  // creates and appends TR's to the table from in-memory vars
$("#table1Body tr:even").css("background-color", "rgb(181,221,181)");
$("#table1Body tr:odd").css("background-color", "rgb(255,255,220)");

IE 在检测这类人为错误方面并不是最出色的。

于 2013-05-06T03:24:26.637 回答