una - ¿Cómo alternar colores de filas de tablas HTML usando JSP?

diseño de tablas en html

Question

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

Mi CSS se ve algo así 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 una variable boolean impar / par para rastrear la fila. Entonces mi etiqueta <tr> sería algo así como:

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

Answer 1

(Esta respuesta solo se refiere al lado CSS de las cosas ...)

Como cuestión de rutina, siempre apunto al niño TD de esta manera:

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

La razón es que IE realmente aplica el 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 establecer 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 2

He usado un operador terciario 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>

Answer 3

No uso JSP, así que no puedo darle una respuesta en su idioma, pero esto es lo que hago (usando un pseudo có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 extenderlo fácilmente a row2 , row3 y cambie su código de salida para que sea counter % 4 , etc.

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

Solo hazlo y va a funcionar:

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

Answer 6

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 la variable que especifique.

A continuación, 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 iniciador JSTL de IBM tiene más información sobre la biblioteca de etiquetas core y lo que le ofrece.