Question

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

Answer 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; }

如何用JSTL交替表行背景颜色？

1 个答案: