如何設置交替表格行的背景顏色？

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}