Question

我在<tr>上有一个循环表，我想为行使用两个CSS类，就像rowClass的属性rich:dataTable一样。

这可能是代码的一部分：

<table>
 <c:forEach items="${MyBean.Result}" var="item">
  <tr>
   <td><h:outputText value="${item.attr}" />
   </td>
  </tr>
 </c:forEach>
</table>

如何在HTML表格的每一行上交替使用CSS类？

Answer 1

tr.odd { background-color: #EEDDEE }
tr.even { background-color: #EEEEDD }

然后使用

<c:forEach items="${element}" var="myCollection" varStatus="loopStatus">
  <tr class="${loopStatus.index % 2 == 0 ? 'odd' : 'even'}">
     <td><h:outputText value="${item.attr}" />
     </td>
  </tr>
</c:forEach>

Answer 2

您还可以使用仅限CSS的解决方案：

tr:nth-child(odd): { background-color: #EEDDEE }

和

tr:nth-child(even): { background-color: #EEEEDD }

然后您不需要从PHP创建任何动态类。适用于所有浏览器，IE8及更早版本除外。

See W3Schools info

Answer 3

我首选的选项是设置一个计数器并使用MOD运算符。

<tr <cfif RowCount MOD 2 EQ 1>class="even"<cfelse>class="odd"</cfif>>

在HTML表的每一行上交替使用CSS类

3 个答案: