Wie alternieren HTML-Tabellenzeilenfarben mit JSP?

Wie kann ich Alternative HTML-Tabellenzeile Farben mithilfe des JSP?

Mein CSS sieht so aus:

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

Möchte ich <c:forEach> zur Iteration über eine Sammlung.

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

Brauche ich einen int count-variable oder Boolesche gerade/ungerade variable zu verfolgen, die Zeile. Dann meine <tr> - tag würde so Aussehen:

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

InformationsquelleAutor der Frage Steve Kuo | 2008-10-28

86

Verwenden Sie die varStatus - Attribut auf Ihre forEach tag und JSTL gelingen wird, eine Instanz einer javax.- servlet.jsp.jstl.core.LoopTagStatus für Sie in die variable name, den Sie angeben.

Können Sie dann mit einem ternären operator, um ganz einfach die Ausgabe der entsprechenden Klasse name:
```
<c:forEach items="${element}" var="myCollection" varStatus="loopStatus">
  <tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
    ...
  </tr>
</c:forEach>
```
Diese JSTL primer von IBM hat weitere Informationen über den core tag-Bibliothek-und was es Ihnen gibt.

InformationsquelleAutor der Antwort Jonny Buchanan
2

Wenn Sie bereit sind, um das geschehen auf der client-Seite, die Sie tun können, Zebra-Striping mit JQuery.

Wäre es getan mit nur ein paar Zeilen code, aber man müsste die jquery-Bibliothek in Ihre Datei.

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

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

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

InformationsquelleAutor der Antwort Eli
2

(diese Antwort betrifft nur die CSS-Seite der Dinge...)

Als selbstverständlich, habe ich immer das Ziel das Kind TD ' s gerne so:
```
tr.odd td {}
tr.even td {}
```
Der Grund dafür ist, dass der IE tatsächlich gilt TR background-color durch das entfernen der eingestellte Wert auf die TR und Ihre Anwendung auf jedes einzelne TD in, TR. Manchmal müssen Sie möglicherweise ein css-reset oder andere css-Regeln, überschreibt IE s seltsame Art, das zu tun TR-hintergrund-Farbe, so ist dies ein Weg, um sicherzustellen, dass Sie vermeiden, dass.

Auch, möchten Sie vielleicht zu prüfen, Einstellung nur
```
tr td {background-color: #EEDDEE}
```
und
```
tr.odd td {background-color: #EEEEDD}
```
also dein code ist etwas weniger ausführlich,

InformationsquelleAutor der Antwort Andy Ford
1

Ich nicht verwenden, JSP, so kann ich nicht geben Sie eine Antwort in Ihrer Sprache, aber hier ist was ich Tue (mit pseudo-code)
```
counter = 0
foreach (elements)
    counter = counter + 1
    output: <tr class="row{counter % 2}">...</tr>
```
Persönlich habe ich die Namen der Klassen "row0" und "row1", das Ihnen erlaubt, wechseln zwischen Ihnen mit einem einfachen modulo-Berechnung, auch wenn Sie entscheiden, dass die Zeilen abwechselnd in triples oder quads (statt Paare), können Sie leicht erweitern, um row2, row3 und ändern Sie Ihre Ausgabe-code zu counter % 4 usw.

InformationsquelleAutor der Antwort nickf

Ich habe eine tertiäre operator in Fällen wie diesem. Es würde so Aussehen:

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>

InformationsquelleAutor der Antwort

1

Tun gerade so und zur Arbeit gehen:
```
table tr:nth-child(odd) { background-color: #ccc; }
```
InformationsquelleAutor der Antwort Cifi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.