Comment alterner les couleurs des lignes de tableau HTML à l'aide de JSP?

Question

Comment alterner les couleurs des lignes de tableau HTML à l'aide de JSP?

Mon CSS ressemble à quelque chose comme:

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

Je souhaite utiliser <c:forEach> pour parcourir une collection.

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

J'ai besoin d'une variable int count ou d'une variable booléenne impaire / paire pour suivre la ligne. Ensuite, mon <tr> tag ressemblera à quelque chose comme:

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

Answer 1

Utilisez l'attribut varStatus de votre balise forEach et JSTL gérera une instance d'un javax.servlet.jsp.jstl.core.LoopTagStatus a> pour vous dans le nom de variable que vous spécifiez.

Vous pouvez ensuite utiliser un opérateur ternaire pour générer facilement le nom de classe approprié:

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

Cet amorce JSTL d'IBM contient de plus amples informations sur le < code> noyau bibliothèque de balises et ce qu’elle vous donne.

Answer 2

Si vous souhaitez que cela se produise côté client, vous pouvez effectuer le traçage de zébrures avec JQuery.

Cela se ferait avec seulement quelques lignes de code, mais vous auriez à inclure la bibliothèque jquery dans votre fichier.

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

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

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

Answer 3

(cette réponse ne concerne que le côté CSS des choses ...)

Naturellement, je cible toujours les enfants des TD comme suit:

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

La raison en est que IE applique en réalité la couleur de fond TR en supprimant la valeur définie sur le TR et en l'appliquant à chaque TD individuelle au sein de ce TR. Parfois, vous pouvez avoir une réinitialisation css ou d’autres règles css qui remplacent la manière étrange de faire la couleur de fond TR, ce qui vous permet d’éviter cela.

Vous pouvez également envisager de définir uniquement

.

tr td {background-color: #EEDDEE}

et

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

afin que votre code soit légèrement moins détaillé

Answer 4

Faites comme ça et allez au travail:

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

Answer 5

Je n'utilise pas JSP, je ne peux donc pas vous répondre dans votre langue, mais voici ce que je fais (en utilisant un pseudo-code)

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

Personnellement, je nomme les classes " rangée0 " et "row1", ce qui vous permet d'alterner entre eux avec un simple calcul de module. De plus, si vous décidez d'alterner les lignes en triples ou en quadruples (au lieu de paires), vous pouvez facilement l'étendre à row2 , row3 et modifiez votre code de sortie en compteur% 4 , etc.

Answer 6

J'ai utilisé un opérateur ternaire dans des cas comme celui-ci. Cela ressemblerait à quelque chose comme:

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>