web-dev-qa-db-ja.com

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

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>

行を追跡するには、整数カウント変数またはブールの奇数/偶数変数が必要です。すると、<tr>タグは次のようになります。

<tr class="odd or even depending on the row">
htmlcssjspjstl
29
Steve Kuo

varStatusタグでforEach属性を使用すると、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入門 には、coreタグライブラリとそれが提供するものに関する詳細情報があります。

89
Jonny Buchanan

このようにして動作します：

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

これをクライアント側で実行したい場合は、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

2
Eli

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

もちろん、私は常に子TDをターゲットにしています。

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

その理由は、IEは、TRに設定された値を削除してTRの背景色を実際に適用し、それをそのTR内の個々のTDに適用することです。 CSSリセットまたはIEのTRの背景色の奇妙な方法をオーバーライドする他のCSSルールがある可能性があるため、これはそれを確実に回避する方法です。

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

tr td {background-color: #EEDDEE}

そして

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

あなたのコードは少し冗長ではありません

2
Andy Ford

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

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>
1
Eirik

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

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

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

1
nickf