Wie HTML-Tabelle Zeilenfarben mit JSP wechseln?

Question

Wie kann ich alternative HTML-Tabelle Zeilenfarben mit JSP?

Meine CSS sieht etwa so aus:

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

Ich möchte <c:forEach> verwenden, um eine Sammlung iterieren.

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

Ich brauche einen int Zählvariable oder boolean gerade / ungerade Variable die Zeile zu verfolgen. Dann ist mein <tr> Tag etwas aussehen würde:

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

Answer 1

Mit dem varStatus Attribute auf Ihrem forEach Tag und JSTL wird eine Instanz eines javax.servlet.jsp.jstl.core.LoopTagStatus für Sie in den Variablennamen angeben.

Sie können dann einen ternären Operator leicht Ausgabe der entsprechenden Klassennamen verwenden:

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

Der JSTL Primer von IBM hat mehr Informationen über die core Tag-Bibliothek und das, was es gibt Ihnen.

Answer 2

Wenn Sie bereit sind, dies auf der Client-Seite passieren, können Sie Zebra Striping mit JQuery tun.

Es wäre mit nur ein paar Zeilen Code getan werden, aber Sie würden die jQuery-Bibliothek in der Datei enthalten müssen.

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

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

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

Answer 3

(diese Antwort bezieht sich nur auf die CSS-Seite der Dinge ...)

Wie selbstverständlich, ich Ziel immer das Kind TD wie folgt:

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

Die Sein Grund ist, dass IE gilt eigentlich TR Hintergrund-Farbe, die durch den Wert auf dem TR gesetzt zu entfernen und es auf jeden einzelnen TD innerhalb dieser TR Anwendung. Manchmal werden Sie vielleicht ein CSS-Reset oder andere CSS-Regeln, die tun TR Hintergrund-Farbe IE seltsame Art und Weise außer Kraft gesetzt, so ist dies ein Weg, um sicherzustellen, dass zu vermeiden.

Auch sollten Sie nur in Erwägung zu ziehen

tr td {background-color: #EEDDEE}

und

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

, damit Ihr Code ist etwas weniger ausführlich

Answer 4

tun Genau so und wird funktionieren:

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

Answer 5

Ich verwende JSP nicht, so kann ich Ihnen keine Antwort in Ihrer Sprache geben, 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 nenne ich die Klassen „ROW0“ und „row1“, die Sie wechseln zwischen ihnen mit einem einfachen Modul Berechnung lässt, auch, wenn Sie sich entscheiden Reihen in Tripel oder Quads abwechselnd haben (statt Paare), können Sie leicht zu erweitern, um row2, row3 und Ausgabecode ändern counter % 4, etc werden.

Answer 6

Ich habe einen ternären Operator in Fällen wie diesen verwendet. Es wäre in etwa 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>