JSPを使用してHTMLテーブルの行の色を変更する方法は？

Question

JSPを使用してHTMLテーブルの行の色を変更するにはどうすればよいですか

私のCSSは次のようになります：

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

<c:forEach>を使用してコレクションを繰り返したい。

<c:forEach items="${element}" var="myCollection">
  <tr>
    <td><c:out value="${element.field}"/></td>
    ...
  </tr>
</c:forEach>

行を追跡するには、int count変数またはboolean odd / even変数が必要です。次に、私の<tr>タグは次のようになります。

<tr class="odd or even depending on the row">

Answer 1

forEach タグで varStatus 属性を使用すると、JSTLは javax.servlet.jsp.jstl.core.LoopTagStatus 指定した変数名であなたのために。

その後、三項演算子を使用して適切なクラス名を簡単に出力できます：

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

IBMの JSTLプライマーには、< code> core タグライブラリとそれが提供するもの。

Answer 2

これをクライアント側で実行したい場合は、JQueryを使用してZebra Stripingを実行できます。

わずか数行のコードで実行できますが、ファイルにjqueryライブラリを含める必要があります。

http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

http://docs.jquery.com/Selectors/odd

http://docs.jquery.com/Selectors/even

Answer 3

（この答えは物事のCSS側にのみ関係します...）

当然のことながら、私は常に次のように子TDをターゲットにします。

tr.odd td {}
tr.even td {}

IEは、TRに設定された値を削除し、そのTR内の個々のTDに適用することにより、実際にTRの背景色を適用するためです。 IEのTRの背景色を行う奇妙な方法を無効にするcssリセットまたは他のcssルールがある場合があるため、これを回避する方法です。

また、設定だけを検討することもできます

tr td {background-color: #EEDDEE}

and

tr.odd td {background-color: #EEEEDD}

そのため、コードは少し冗長になります

Answer 4

このようにするだけで動作します：

table tr:nth-child(odd) { background-color: #ccc; }

Answer 5

私はJSPを使用していないので、あなたの言語で答えを出すことはできませんが、ここで私がすることは（擬似コードを使用して）

counter = 0
foreach (elements)
    counter = counter + 1
    output: <tr class="row{counter % 2}">...</tr>

個人的には、クラスに「row0」という名前を付けます。および「row1」、単純なモジュラス計算でそれらを交互に切り替えます。また、行を（ペアではなく）トリプルまたはクワッドで交互に決定する場合、 row2 、 row3 、出力コードを counter％4 などに変更します。

Answer 6

このような場合に三項演算子を使用しました。次のようになります：

String oddEven="";
<c:forEach items="${element}" var="myCollection">
    oddEven = (oddEven == "even") ? "odd" : "even";
    <tr class='"'+oddEven+'"'>
        <td><c:out value="${element.field}"/></td>
        ...
    </tr>
</c:forEach>