开发者

How to alternate table row background colors with JSTL?

How do i alternate table rows with 2 seperate colours but i nid the header row to be of another colour. Is it possible? i am req开发者_开发技巧uired to use the looping technique. oh no i aint allowed to post pictures. but it looks something like a table with 5 rows and the header row is blue in colour while the other 4 rows are red>white>red>white


Use <c:forEach> with a varStatus and some lines of CSS.

<table>
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${bean.list}" var="item" varStatus="loop">
            <tr class="${loop.index % 2 == 0 ? 'even' : 'odd'}">
                <td>${item.property1}</td>
                <td>${item.property2}</td>
                <td>${item.property3}</td>
            </tr>
        </c:forEach>
    <tbody>
</table>

with CSS

tr.even { background: red; }
tr.odd { background: white; }

In the above example, the header is just separated from the body. When the table row index in the body is a multiple of 2 (even), then it get class="even", otherwise class="odd" (open page in browser, rightclick it and View Source to see it yourself). With CSS you can just control the style of the invididual elements. To give the header row a blue background, just add

thead tr { background: blue; }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜