Jak zmieniać kolory wierszy tabeli HTML za pomocą strony JSP?

Question

W jaki sposób mogę zmieniać kolory wierszy tabeli HTML za pomocą JSP?

Moje CSS wyglądał:

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

chcę używać <c:forEach> iteracyjne nad kolekcji.

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

Potrzebuję zmiennej int count lub boolean nieparzystej/parzystej zmiennej do śledzenia wiersza. Wtedy mój <tr> tag będzie wyglądać następująco:

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

Answer 1

Użyj atrybutu varStatus na tagu forEach i JSTL będzie zarządzać instancję javax.servlet.jsp.jstl.core.LoopTagStatus na ciebie w nazwie zmiennej można określić.

Następnie można użyć operatora potrójny łatwe wyjście odpowiednia nazwa klasy:

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

Ten JSTL primer od IBM ma więcej informacji na temat biblioteki core znacznika i co to daje.

Answer 2

Nie używać JSP, więc nie mogę dać Ci odpowiedź w języku polskim, ale tutaj jest to, co robię (za pomocą kodu pseudo)

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

Osobiście nazywam klasy "row0" i "row1", które pozwalają na zmianę między nimi za pomocą prostego obliczenia modułu, a także, jeśli zdecydujesz się mieć rzędy na przemian w potrójnych lub quadach (zamiast par), możesz łatwo rozszerzyć go na row2, row3 i zmienić kod wyjściowy na counter % 4, itp.

Answer 3

W takich przypadkach użyłem operatora trzeciego stopnia. Byłoby to wyglądać mniej więcej tak:

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

Jeśli chcesz to zrobić po stronie klienta, możesz zrobić Zebra Striping z JQuery.

Można to zrobić za pomocą zaledwie kilku wierszy kodu, ale konieczne jest dołączenie biblioteki jquery do pliku.

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

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

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

Answer 5

(odpowiedź ta odnosi się jedynie do strony CSS rzeczy ...)

Jako sprawę oczywiście, zawsze kierować TD dziecka tak:

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

Powodem jest to, że IE rzeczywiście stosuje kolor tła TR, usuwając zestaw wartości z TR i stosując go do każdego TD w tym TR. Czasami możesz mieć reset css lub inne reguły css, które zastępują dziwny sposób działania TR w tle, więc jest to sposób na uniknięcie tego.

Ponadto, warto rozważyć ustawienie tylko

tr td {background-color: #EEDDEE} 

i

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

więc kod jest nieco mniej gadatliwy

Answer 6

Wystarczy zrobić tak i będzie działać:

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