0

jspページで交互にthrにcssを適用したい。以下は私のコードです。

<c:forEach var="aff" items="${report}">
        <tr class="**tital_black_second**">
    <input type="hidden" id="org_id" value="${aff.org_id}">
      <td width="74" class="td_text">&nbsp;</td>
      <td width="173" class="heading3 td_text">${aff.string}</td>
      <td width="168" class="td_text text3">${aff.posted}</td>
      <td width="134" class="td_text text3">${aff._sold}</td>
      <td width="118" class="td_text text3">${aff.of_commision}</td>
      <td width="126" class="td_text text3">${affl}</td>
      <td width="115" class="td_text text3"></td>
      <td width="129" class="td_text text3">&nbsp;</td>
</tr>
</c:forEach>

各 tr に交互にクラスを適用したい、つまり 1 つの tr が描画されたときに、class="tital_black_second" が必要で、2 番目が描画されたときに class="tital_black_first" が必要です。

どうすればこれを達成できますか。

前もって感謝します。

4

3 に答える 3

1

ここに投稿されたソリューションを使用できます: JSP を使用して HTML テーブルの行の色を変更する方法は?

あなたのコードでは、次のようになります。

<c:forEach items="${report}" var="aff" varStatus="loopStatus">
  <tr class="${loopStatus.index % 2 == 0 ? 'tital_black_second' : 'tital_black_first'}">
    <input type="hidden" id="org_id" value="${aff.org_id}">
      <td width="74" class="td_text">&nbsp;</td>
      <td width="173" class="heading3 td_text">${aff.string}</td>
      <td width="168" class="td_text text3">${aff.posted}</td>
      <td width="134" class="td_text text3">${aff._sold}</td>
      <td width="118" class="td_text text3">${aff.of_commision}</td>
      <td width="126" class="td_text text3">${affl}</td>
      <td width="115" class="td_text text3"></td>
      <td width="129" class="td_text text3">&nbsp;</td>
</tr>
</c:forEach>
于 2012-09-04T10:52:53.403 に答える
1

jstl で行う代わりに、CSS または jQuery でこれを行うことができます。

CSS3 には、:nth-child(arg)代替行の表示を制御できる疑似クラスがあります。ただし、これは最新のブラウザーでのみサポートされているため、ブラウザー間の互換性が問題になる可能性があります。

tr:nth-child(odd)    { background-color:#ffffff; }
tr:nth-child(even)    { background-color:#000000; }

またはjQueryで：

$("tr:odd").css("background-color", "#ffffff");
$("tr:even").addClass("evenRowClass");
于 2012-09-04T10:45:54.453 に答える
0

偶数および奇数の CSS ルール を見てください。各行に手動でクラスを追加することは、不要なオーバーヘッドです。

.yourtable-class tr:nth-child(even) { 
   // styles for your even rows
}

.yourtable-class tr:nth-child(odd) { 
   // styles for your odd rows
}
于 2012-09-04T10:45:05.997 に答える