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

Question

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

Answer 1

您正在寻找交替的行。这可以通过向每个其他行添加不同的类来实现。

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 2

由于您没有为返回代码指定语言，因此我将为您提供纯CSS答案。

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

Answer 3

为交替行添加第二个css类。假设这里的默认bg颜色是深灰色，第二个类看起来像这样：

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

如果您不想为应用第二个类编写逻辑服务器端代码，可以使用JQuery的Odd selector。但是，即使你只是手动应用第二堂课，你就会接近斑马条纹。

Answer 4

你想要的是模数除法

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

如果你使用的是CSS3，你可以这样做

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