Чередование классов CSS в каждой строке HTML-таблицы

У меня есть таблица с циклом на <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>

Как я могу чередовать класс CSS в каждой строке таблицы HTML?


html css jsp
person Achraf    schedule 07.12.2011    source источник

Ответы (3)


arrow_upward
7
arrow_downward 

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>
person Mojtaba Pourmirzaei    schedule 07.12.2011

arrow_upward
0
arrow_downward

Мой предпочтительный вариант — установка счетчика и использование оператора MOD.

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

person Matt Busche    schedule 07.12.2011

arrow_upward
0
arrow_downward

Вы также можете использовать решение только для CSS:

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

а также

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

Тогда вам не нужно будет создавать какие-либо динамические классы из PHP. Работает во всех браузерах, кроме IE8 и более ранних версий.

См. информацию о W3Schools

person Niklas Wulff    schedule 07.12.2011