HTMLテーブルの各行にCSSクラスを交互に入れよう

Question

私は<tr>のループを持つテーブルを持っていて、の場合はrowClassのように2つのCSSクラスを使用したいと考えています。

これは、コードの5月一部です：

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

私はHTMLテーブルの各行にCSSクラスを交互にするにはどうすればよいですか？そして、あなたがクリートする必要はありません

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

と

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

：

Answer 1

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

その後、あなたはまた、唯一の解決策CSSを使用することができます

<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

を使用PHPの動的クラス。 IE8以前のブラウザを除くすべてのブラウザで動作します。

See W3Schools info

Answer 3

私の好ましい選択肢は、カウンタを設定し、MOD演算子を使用しています。

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