Блог

Главная - Вопросы по программированию - Как чередовать цвета фона строки таблицы с JSTL?

Как чередовать цвета фона строки таблицы с JSTL?

#java #html #jstl

#java #HTML #jstl

Вопрос:

Как мне чередовать строки таблицы с двумя отдельными цветами, но я считаю, что строка заголовка должна быть другого цвета. Возможно ли это? мне требуется использовать технику цикла. о нет, мне не разрешено публиковать картинки. но это выглядит примерно как таблица с 5 строками, а строка заголовка синего цвета, в то время как остальные 4 строки — красный> белый> red> white

Комментарии:

1. Описание немного расплывчатое. Можете ли вы добавить к своему вопросу небольшую HTML-таблицу, показывающую, что вам нужно?

Ответ №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; }