Come alternare i colori delle righe delle tabelle HTML usando JSP?

Question

Come posso alternare i colori delle righe delle tabelle HTML usando JSP?

Il mio CSS assomiglia a:

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

Voglio usare <c:forEach> per scorrere su una raccolta.

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

Ho bisogno di una variabile conteggio int o di una variabile pari / dispari booleana per tenere traccia della riga. Quindi il mio <tr> tag sarebbe simile a:

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

Answer 1

Usa l'attributo varStatus sul tuo tag forEach e JSTL gestirà un'istanza di un javax.servlet.jsp.jstl.core.LoopTagStatus per te nel nome della variabile specificato.

È quindi possibile utilizzare un operatore ternario per generare facilmente il nome di classe appropriato:

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

Questo primer JSTL di IBM contiene ulteriori informazioni sul < code> core e la libreria di tag e cosa ti offre.

Answer 2

Se sei disposto a farlo accadere sul lato client, puoi eseguire Zebra Striping con JQuery.

Sarebbe fatto con solo un paio di righe di codice, ma dovresti includere la libreria jquery nel tuo file.

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

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

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

Answer 3

(questa risposta riguarda solo il lato CSS delle cose ...)

Ovviamente, prendo sempre di mira il bambino TD in questo modo:

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

Il motivo è che IE applica effettivamente il colore di sfondo di TR rimuovendo il valore impostato su TR e applicandolo a ogni singolo TD all'interno di quel TR. A volte potresti avere un reset CSS o altre regole CSS che sovrascrivono lo strano modo di IE di fare il colore di sfondo di TR, quindi questo è un modo per assicurarti di evitarlo.

Inoltre, potresti considerare di impostare solo

tr td {background-color: #EEDDEE}

e

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

quindi il tuo codice è leggermente meno dettagliato

Answer 4

Fai proprio così e funzionerà:

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

Answer 5

Non uso JSP, quindi non posso darti una risposta nella tua lingua, ma ecco cosa faccio (usando lo pseudo codice)

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

Personalmente, chiamo le classi " riga0 " e " riga1 " ;, che ti consente di alternare tra loro con un semplice calcolo del modulo, inoltre, se decidi di far alternare le righe in triple o quadruple (anziché coppie), puoi facilmente estenderlo a row2 , row3 e modifica il tuo codice di output in counter% 4 , ecc.

Answer 6

Ho usato un operatore ternario in casi come questo. Sembrerebbe qualcosa del genere:

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>