3

HTMLの表形式のデータを生成するときに、テーブルの行の色を変更するためにどのような方法を使用するかを聞きたかっただけです。私の目的では、バックエンドでJavaとJSPを使用しています。データをループすることを計画してindex % 2 == 0いて、ある色にelse設定した場合は別の色に設定しました。これでいい？ある種のタグライブラリを使用したほうがいいのではないでしょうか。

4

7 に答える 7

4

JSTL を使用できる場合 (Java のようなソリューションによく似ていますが、より優れています)、

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

色やその他のスタイルを定義するための CSS クラスが用意されました。

サーバー側で同じことを行う「display」タグまたはクライアント側の jQuery を使用して、奇数、偶数のセレクターで行を選択し、クラスを追加することも検討できます。

于 2010-07-26T12:27:23.363 に答える
2

これは、ほとんどのブラウザーで動作する最も単純なソリューションです。詳細な議論については、この回答を参照してください。IE6 を回避できる場合は、CSS 疑似セレクターを使用して同じ効果を得ることができます。または、JavaScript を使用できます。

グローバル ソリューション (複数の場所でこのループを行わなくてもすべてのテーブルで機能するソリューション) が必要な場合は、フィルターを使用して HTML を解析できます。HTML をきれいに保つ限り、フィルターはきれいにダンプできます (次の ">" までバッファーに読み込み、持っているタグを確認し、不足している属性を追加しTRてバッファーをフラッシュします)。

getColumns()最後に、共通の API ( 、 、getRows()など)でテーブルをラップし、getCell()1 つの JSP を使用してすべてをレンダリングできます。

taglibs について: ある場合は、それを使用します。そうでない場合は、JSP をまったく使用せずに、そのようなテーブルを純粋な Java でフォーマットするヘルパー クラスを作成すると、処理が速くなる可能性があります。そうすれば、Web サーバーを常に再起動しなくても、簡単に単体テストを記述してソリューションを開発できます。

于 2010-07-26T12:14:12.403 に答える
1

最も簡単で便利な方法は css nth-childを使用することですが、残念ながら IE ではサポートされていません。したがって、IE と互換性のある方法が必要な場合は、それで問題ありません。

編集: css ソリューションは次のようになります。

tbody:nth-child(2n) { /* even rows */ 
  background-color:#eee;
}     
tbody:nth-child(2n+1) { /* odd rows */
  background-color:#ccc;
}
于 2010-07-26T12:08:02.690 に答える
0

ムーツールシマウマ。David walsh は良い記事を書いています http://davidwalsh.name/mootools-zebra-tables-plugin

于 2010-08-02T13:01:40.103 に答える
0

一般的な JSP ガイドラインは、JSP に Java コードをインターリーブするのではなく、その Java コードをカプセル化するタグを使用することです。だから私があなたなら、インデックス % 2 == 0 を避けるでしょう。

同様に偶数疑似セレクターを使用して CSS3 でこれを行うことができます。W3 には例があります。

于 2010-07-26T12:06:34.923 に答える
0

クライアント側でテーブル行の色付けに JavaScript を使用することをお勧めします。これにより、サーバーからの（わずかな）負担も軽減されます。ただし、これは大きなテーブル (>100 行) には適していません。

于 2010-07-26T12:11:50.753 に答える
0

すでに jQuery を使用している場合は、偶数 (または奇数) セレクターの使用を検討してください。偶数セレクターのドキュメンテーション ページには、表の行の色分けの例もあります。

于 2010-07-26T12:16:09.280 に答える