如何设置交替表格行的背景颜色？

Question

我当时只是想知道如何在动态获取东西时完成这种设计？我的意思是只能有一个类可以用来获取背景颜色，取决于块是奇数还是偶数。我希望我的要求很明确：背景颜色随着行的奇数或偶数而变化。

Answer 1

添加第二个CSS类的交替行。假设这里默认的bg颜色是深灰色，第二个类将如下所示：

.altRow { background-color：white！important; }

如果你不想编写逻辑服务器端应用第二类，你可以使用JQuery的Odd selector。但是，即将离开斑马条纹而不用手动申请第二堂课的时间就近了。

Answer 2

你想要的是模数师

if(rowNum % 2 == 0) {class="even"} else {class="odd"} 

，或者如果您使用CSS3，你可以做这样的

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF} 

Answer 3

你要找的交替行。这可以通过向其他行添加不同的类来实现。

Tutorials are plenty关于如何做到这一点。

CSS3 also provides a new way to do this无添加类：

tr:nth-child(odd) { background-color:#eee; } 
tr:nth-child(even) { background-color:#fff; } 

Answer 4

正如你没有指定什么返回代码，我给你一个纯CSS的答案的语言。

tr:nth-child(2n+1) {YOURSTYLEINHERE} 
or 
tr:nth-child(odd) {YOURSTYLEINHERE}