29

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>

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

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

6 に答える 6

89

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があります。

于 2008-10-28T01:12:51.143 に答える
3

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

table tr:nth-child(odd) { background-color: #ccc; }
于 2011-09-29T08:32:29.970 に答える
2

(この回答は、CSS 側にのみ関係します...)

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

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

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

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

tr td {background-color: #EEDDEE}

と

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

あなたのコードは少し冗長です

于 2008-10-28T01:50:14.517 に答える
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

于 2008-10-28T01:31:25.693 に答える
1

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

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

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

于 2008-10-28T01:02:18.543 に答える
1

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

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>
于 2008-10-28T01:08:15.413 に答える