如何使用 JSTL 替换表格行背景颜色？答案

【问题标题】：How to alternate table row background colors with JSTL?如何使用 JSTL 替换表格行背景颜色？
【发布时间】：2011-09-08 10:33:54
【问题描述】：

我如何用 2 种不同的颜色交替表格行，但我将标题行设置为另一种颜色。可能吗？我需要使用循环技术。哦，不，我不允许发布图片。但它看起来像一个有 5 行的表格，标题行是蓝色的，而其他 4 行是红色>白色>红色>白色

【问题讨论】：

描述有点模糊。你能在你的问题中添加一个小的 HTML 表格来显示你需要什么吗？

标签： java html jstl

【解决方案1】：

将<c:forEach> 与varStatus 和一些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>

使用 CSS

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

在上面的示例中，标题只是与正文分开。当正文中的表格行索引是2的倍数（偶数）时，则得到class="even"，否则得到class="odd"（在浏览器中打开页面，右键单击它并查看源代码自行查看)。使用CSS，您可以控制个别元素的样式。要给标题行一个蓝色背景，只需添加

thead tr { background: blue; }

【讨论】：