Как чередовать цвета строк таблицы HTML с помощью JSP?

Question

Как мне чередовать цвета строк таблицы HTML с помощью JSP?

Мой 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

Используйте атрибут varStatus в вашем теге forEach, и 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-праймер от IBM содержит больше информации о библиотеке тегов core и о том, что она вам дает.

Answer 2

Просто сделай так и будешь работать:

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

Answer 3

(этот ответ относится только к стороне 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 4

Если вы хотите, чтобы это происходило на стороне клиента, вы можете использовать Zebra Striping с JQuery.

Это можно сделать всего несколькими строками кода, но вам нужно будет включить библиотеку jquery в ваш файл.

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

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

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

Answer 5

Я использовал третичный оператор в подобных случаях. Это будет выглядеть примерно так:

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 6

Я не использую JSP, поэтому я не могу дать вам ответ на вашем языке, но вот что я делаю (используя псевдокод)

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

Лично я называю классы "row0" и "row1", что позволяет чередовать их с помощью простого вычисления модуля, а также, если вы решите иметь строки, чередующиеся в тройках или квадрах (вместо пар), вы можете легко увеличьте его до row2, row3 и измените выходной код на counter % 4 и т. д.