How to alternate HTML table row colors using JSP?

Question

How do I alternate HTML table row colors using JSP?

My CSS looks something like:

tr.odd {background-color: #EEDDEE}
tr.even {background-color: #EEEEDD}

I want to use <c:forEach> to iterate over a collection.

<c:forEach items="${element}" var="myCollection">
  <tr>
    <td><c:out value="${element.field}"/></td>
    ...
  </tr>
</c:forEach>

I need an int count variable or boolean odd/even variable to track the row. Then my <tr> tag would look something like:

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

Answer 1

Use the varStatus attribute on your forEach tag and JSTL will manage an instance of a javax.servlet.jsp.jstl.core.LoopTagStatus for you in the variable name you specify.

You can then use a ternary operator to easily output the appropriate class name:

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

This JSTL primer from IBM has more information about the core tag library and what it gives you.

Answer 2

If you are willing to make this happen on the client side, you can do Zebra Striping with JQuery.

It would be done with just a couple lines of code, but you would have to include the jquery library in your file.

http://docs.jquery.com/Tutorials:Zebra_Striping_Made_Easy

http://docs.jquery.com/Selectors/odd

http://docs.jquery.com/Selectors/even

Answer 3

(this answer only pertains to the CSS side of things...)

As a matter of course, I always target the child TD's like so:

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

The reason being is that IE actually applies TR background-color by removing the value set on the TR and applying it to each individual TD within that TR. Sometimes you might have a css reset or other css rules that overrides IE's strange way of doing TR background-color, so this is a way to make sure you avoid that.

Also, you might want to consider setting just

tr td {background-color: #EEDDEE}

and

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

so your code is slightly less verbose

Answer 4

Just do like this and is going to work:

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

Answer 5

I don't use JSP, so I can't give you an answer in your language, but here's what I do (using pseudo code)

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

Personally, I name the classes "row0" and "row1", which lets you alternate between them with a simple modulus calculation, also, if you decide to have rows alternating in triples or quads (instead of pairs), you can easily extend it to row2, row3 and change your output code to be counter % 4, etc.

Answer 6

I've used a tertiary operator in cases like this. It would look something like:

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>