jquery - 如何为迭代动态表中的交替行设置背景颜色

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>

我想用不同的 background-color 替换 rows，但我不确定如何使用迭代动态表来实现。

我尝试使用 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

更新

好的，如果你想定位行而不是列，只需将其添加到 tr 而不是 td

NEW FIDDLE