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

<强>更新

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

NEW FIDDLE

Answer 2

您可以使用css

执行此操作

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

如何为迭代动态表中的备用行设置背景颜色

2 个答案: