如何使用JSP替換HTML表格行顏色？

Question

如何使用JSP替換HTML表格行顏色？

我的CSS看起來像：

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

我想用<c:forEach>遍歷集合。

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

我需要一個int count變量或布爾奇數/偶數變量來跟蹤行。然後我<tr>標籤會看起來像：

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

Answer 1

使用您forEach標籤varStatus屬性和JSTL將在您指定的變量名管理javax.servlet.jsp.jstl.core.LoopTagStatus的實例爲您服務。

然後可以使用三元操作符可以輕鬆地輸出相應的類名：

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

這JSTL primer從IBM有大約core標籤庫以及它給你更多的信息。

Answer 2

我不使用JSP，所以我不能給你在你的語言的答案，但這裏是我做什麼（使用僞代碼）

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

就我個人而言，我將類「row0」和「row1」命名爲「row0」和「row1」，它們允許您通過簡單的模數計算在它們之間進行切換，而且，如果決定讓行以三元組或四元組交替（而非成對）輕鬆將其擴展爲row2,row3並將您的輸出代碼更改爲counter % 4等。

Answer 3

我在這種情況下使用了第三級操作符。它看起來是這樣的：

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

如果你願意在客戶端做到這一點，你可以用JQuery來做Zebra Striping。

它只需要幾行代碼就可以完成，但是你必須在你的文件中包含jquery庫。

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

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

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

Answer 5

（這個答案只適用於物聯網的CSS側...）

當然的事，我總是定位的子TD的像這樣：

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

原因是IE實際上通過刪除TR上設置的值並將其應用於該TR內的每個單獨的TD來應用TR背景色。有時候你可能會有一個css重置或其他css規則，它們會覆蓋IE的TR背景顏色的奇怪方式，所以這是一種確保你避免這種情況的方法。

而且，你可能要考慮設置只是

tr td {background-color: #EEDDEE} 

和

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

所以你的代碼稍微更簡潔

Answer 6

只要做到這樣，並去上班：

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