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

Question

我只是想知道在动态获取内容时如何实现这种设计？我的意思是必须只有一个类可以根据块是奇数还是偶数来获取背景颜色。我希望我的要求很清楚：行的背景颜色随着奇数或偶数而变化。

- Sachindra

---

你能使用jQuery/JavaScript吗？如果不行，是用哪种语言生成它的？ - Hogsmill

看起来你应该将它标记为 JavaScript 问题。也许你可以只使用 CSS 创建一个带有白色和灰色部分的背景图像，并使其在垂直方向上重复。 - MattiaG

这是通过 PHP 获取的。 - Sachindra

Answer 1

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

有关如何执行此操作，教程很多。 CSS3还提供了一种新的方法，无需添加类即可完成此操作：

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

- Steven

Answer 2

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

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

- Jeepstone

Answer 3

你需要的是模数除法。

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

如果您正在使用CSS3，可以像这样完成它

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

- dstarh

---

bt nth child在ie中无法工作？有没有不使用JavaScript的方法来解决这个问题？ - Sachindra

Answer 4

为交替行添加第二个CSS类。假设默认的背景颜色是深灰色，第二个类应该像这样：

.altRow { background-color:white !important; }

如果您不想在服务器端编写应用第二个类的逻辑代码，可以使用JQuery的 Odd selector。但是除了手动应用第二个类之外，这就是最接近斑马线的方法了。

- Chris B. Behrens