Cómo alternar colores de hileras de tablas HTML usando JSP?

Question

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

Mi CSS se ve algo como:

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 de recuento int o boolean extraña incluso variable de/para realizar un seguimiento de la fila. Entonces mi etiqueta <tr> sería algo como:

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

Answer 1

utilizar el atributo varStatus en su etiqueta JSTL forEach y gestionará una instancia de un javax.servlet.jsp.jstl.core.LoopTagStatus para que en el nombre de la variable que se especifique.

A continuación, puede utilizar un operador ternario a hacer salir fácilmente el nombre de la clase apropiada:

<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 acerca de la biblioteca core etiqueta y lo que le da.

Answer 2

No consumo JSP, por lo que no se puede dar una respuesta en su idioma, pero aquí es lo que hago (usando pseudocódigo)

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

Personalmente, nombro las clases "row0" y "row1", que le permiten alternar entre ellas con un cálculo de módulo simple, también, si decide tener filas alternando en triples o cuádruples (en lugar de pares), puede extiéndalo fácilmente a row2, row3 y cambie su código de salida para que sea counter % 4, etc.

Answer 3

He utilizado un operador terciario en casos como este. Se vería algo 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> 

Answer 4

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 5

(esta respuesta sólo se refiere al lado de las cosas CSS ...)

Como una cuestión de rutina, siempre el objetivo del TD niño como ese:

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

La razón es que IE realmente aplica color de fondo TR al eliminar el valor establecido en el TR y aplicarlo a cada TD individual dentro de ese TR. A veces puede tener un reinicio de css u otras reglas de css que anulan la extraña forma de hacer el color de fondo TR de IE, así que esta es una forma de asegurarse de evitar eso.

Además, es posible que desee considerar la posibilidad de simplemente

tr td {background-color: #EEDDEE} 

y

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

lo que el código es un poco menos prolijo

Answer 6

como acaba de hacer esto y se va a trabajar:

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