¿Cómo alternar los colores de fila de la tabla HTML con JSP?

Question

¿Cómo alterno los colores de fila de la tabla HTML usando JSP?

Mi CSS se parece a:

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

Quiero usar <c:forEach> para iterar sobre una colección.

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

Necesito una variable int count o una variable booleana par / impar para rastrear la fila. Entonces mi etiqueta <tr> se vería así:

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

Answer 1

Use el atributo varStatus en su etiqueta forEach y JSTL administrará una instancia de javax.servlet.jsp.jstl.core.LoopTagStatus para usted en el nombre de variable que especifique.

Luego puede usar un operador ternario para generar fácilmente el nombre de clase apropiado:

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

Este JSTL primer de IBM tiene más información sobre el < código> núcleo biblioteca de etiquetas y lo que te da.

Answer 2

Si está dispuesto a hacer que esto suceda en el lado del cliente, puede hacer Zebra Striping con JQuery.

Se haría con solo un par de líneas de código, pero tendría que incluir la biblioteca jquery en su archivo.

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

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

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

Answer 3

(esta respuesta solo pertenece al lado CSS de las cosas ...)

Por supuesto, siempre me dirijo a los TD de niños así:

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

El motivo es que IE realmente aplica TR-color de fondo eliminando el valor establecido en el TR y aplicándolo a cada TD individual dentro de ese TR. A veces, es posible que tenga un reinicio de css u otras reglas de css que anulen la extraña forma de hacer TR del color de fondo de IE, por lo que es una forma de asegurarse de evitar eso.

Además, es posible que desee considerar la configuración solo

tr td {background-color: #EEDDEE}

y

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

por lo que su código es un poco menos detallado

Answer 4

Haz esto de esta manera y va a funcionar:

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

Answer 5

No uso JSP, por lo que no puedo darte una respuesta en tu idioma, pero esto es lo que hago (usando pseudo código)

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

Personalmente, nombro las clases " fila0 " y " row1 " ;, que le permite alternar entre ellos con un cálculo de módulo simple, también, si decide tener filas alternadas en triples o quads (en lugar de pares), puede extenderlo fácilmente a row2 , row3 y cambie su código de salida para que sea counter% 4 , etc.

Answer 6

He usado un operador ternario en casos como este. Se vería algo así como:

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>