如何設置背景顏色爲迭代動態表格交替行

Question

我有一個動態表作爲跟隨JSP：

<TABLE id="tableCount"> 
     <TR> 
     <TH>Count</TH> 
     <TH>Part</TH> 
     <TH>device</TH> 
     </TR> 


<c:forEach var="i" begin="0" end="${data1.getCount().size() - 1}"> 
     <TR> 
       <TD> 
        ${data1.getCount().get(i)} 
       </TD> 
       <TD> 
        ${data1.getPart().get(i)} 
       </TD> 
       <TD> 
        ${data1.getDevice().get(i)} 
       </TD> 
    </TR> 
</c:forEach> 
</TABLE> 

我想有備用rows不同background-color，但我不知道如何用迭代動態表做到這一點。

我試圖做到這一點使用CSS雖然這是如下：

#tableCount tr.alt td{ 
    color:#000000; 
    background-color:#880000; 
} 

但沒能得到我想要的東西。任何關於此的幫助都會非常棒。我們是否需要使用JQuery或任何腳本語言來實現此目標？請建議。

Answer 1

你可以用CSS做到這一點。使用:nth-of-type(2n+2)目標每隔一行

#tableCount tr td:nth-of-type(2n+2){ 
    //styles here 
} 

你也可以做:nth-of-type(even)

JSFIDDLE

UPDATE

好吧，如果你想針對行而不是列只是添加到tr而不是td

NEW FIDDLE

Answer 2

您可以用CSS

tr:nth-child(even) {background-color: green} 
tr:nth-child(odd) {background-color: red}