Wie HTML-Tabellenzeilenfarben mit JSP alternieren?

Question

Wie wechsele ich HTML-Tabellenzeilenfarben mit JSP?

Meine CSS sieht ungefähr so ​​aus:

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

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

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

Ich brauche eine int-Zählvariable oder eine boolesche ungerade/gerade Variable, um die Zeile zu verfolgen. Dann würde mein <tr> Tag in etwa so aussehen:

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

Answer 1

Verwenden Sie das varStatus Attribut auf Ihrem forEach Tag und JSTL wird eine Instanz eines javax.servlet.jsp.jstl.core.LoopTagStatus für Sie in der Variablennamen angeben verwalten.

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

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

Diese JSTL primer von IBM Weitere Informationen über die core Tag-Bibliothek hat und was es gibt Ihnen.

Answer 2

ich JSP nicht verwenden, so kann ich Ihnen keine Antwort in Ihrer Sprache geben, aber hier ist es, was ich (Pseudocode)

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

Persönlich, ich benenne die Klassen "row0" und "row1", die Sie zwischen ihnen mit einer einfachen Modulberechnung wechseln können, auch, wenn Sie entscheiden, Zeilen abwechselnd in Tripel oder Quads (anstelle von Paaren) haben, können Sie Erweitern Sie es einfach auf row2, row3 und ändern Sie Ihren Ausgabecode zu counter % 4 usw.

Answer 3

Ich habe einen tertiären Operator in Fällen wie diesem 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> 

Answer 4

Wenn Sie bereit sind, dies auf der Clientseite zu ermöglichen, können Sie Zebra Striping mit JQuery durchführen.

Es wäre mit nur ein paar Zeilen Code, aber Sie müssten die Jquery-Bibliothek in Ihre Datei enthalten.

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

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

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

Answer 5

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

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

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

Der Grund dafür ist, dass IE tatsächlich TR-Hintergrundfarbe anwendet, indem der auf dem TR gesetzte Wert entfernt und auf jeden einzelnen TD innerhalb dieses TR angewendet wird. Manchmal haben Sie vielleicht einen CSS-Reset oder andere CSS-Regeln, die die seltsame Art und Weise, wie der IE die TR-Hintergrundfarbe anwendet, außer Kraft setzen, so dass Sie dies vermeiden können.

Auch Sie können nur

tr td {background-color: #EEDDEE} 

und

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

so Ihr Code ist etwas weniger ausführlich

Answer 6

Genau das tun, wie diese Einstellung zu prüfen, und wird funktionieren:

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