web-dev-qa-db-fra.com

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

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

Mon CSS ressemble à quelque chose comme:

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

Je veux 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 de comptage int ou d'une variable booléenne impair/pair pour suivre la ligne. Alors mon <tr> balise ressemblerait à quelque chose comme:

<tr class="odd or even depending on the row">
htmlcssjspjstl
29
Steve Kuo

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

Vous pouvez ensuite utiliser un opérateur ternaire pour sortir 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>

Ce JSTL primer d'IBM a plus d'informations sur la bibliothèque de balises core et ce qu'elle vous apporte.

89
Jonny Buchanan

Faites comme ça et ça va marcher:

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

Si vous souhaitez que cela se produise côté client, vous pouvez effectuer Zebra Striping avec JQuery.

Cela se ferait avec seulement quelques lignes de code, mais vous devrez 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

2
Eli

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

Bien entendu, je cible toujours les TD enfants comme ceci:

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

La raison en est que IE applique réellement TR background-color en supprimant la valeur définie sur le TR et en l'appliquant à chaque individu TD dans ce TR. Parfois vous pourriez avoir une réinitialisation css ou d'autres règles css qui écrasent la façon étrange d'IE de faire TR background-color, c'est donc un moyen de vous assurer d'éviter cela.

En outre, vous pouvez envisager de définir uniquement

tr td {background-color: #EEDDEE}

et

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

donc votre code est un peu moins verbeux

2
Andy Ford

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>
1
Eirik

Je n'utilise pas JSP, donc je ne peux pas vous donner de réponse 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 "row0" et "row1", ce qui vous permet d'alterner entre elles avec un simple calcul de module, aussi, si vous décidez d'avoir des lignes alternant en triplets ou en quads (au lieu de paires), vous pouvez facilement l'étendre à row2, row3 et remplacez votre code de sortie par counter % 4, etc.

1
nickf