alternating applying class to tr

Question

i want to apply the css to the thr alternatily in jsp page. below is my code.

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

for each tr alternately i want to apply the class i.e when one tr is drawn ,i want class="tital_black_second" and when second is drawn class="tital_black_first".

How i can achieve this.

Thanks in Advance.

take a counter , keep adding , and check the value , if odd apply class X if even apply Y — Satya, Sep 04 '12 at 10:41

score 1 · Accepted Answer · answered Sep 04 '12 at 10:45

Instead of doing it in jstl you can do this in CSS or jQuery.

CSS3 has a :nth-child(arg) pseudo-class which allows us to control the display of alternate rows. But this is only supported in modern browser, so cross-browser compatibility can be an issue with this.

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

Or in jQuery:

$("tr:odd").css("background-color", "#ffffff");
$("tr:even").addClass("evenRowClass");

score 1 · Answer 2 · edited May 23 '17 at 12:12

You can use the solution posted here: How to alternate HTML table row colors using JSP?

For your code it would be:

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

score 0 · Answer 3 · answered Sep 04 '12 at 10:45

0

Take a look at even and odd CSS rules. Adding class manually to each row is unnecessary overhead.

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

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

answered Sep 04 '12 at 10:45

Michal Klouda

14,263
7
53
77

alternating applying class to tr

3 Answers3