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

Как изменить цвета строк таблицы 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">

Ответы

Ответ 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 и том, что он вам дает.

Ответ 2

Если вы готовы сделать это на стороне клиента, вы можете сделать 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

Ответ 3

(этот ответ относится только к стороне CSS)...

Разумеется, я всегда нацеливаю дочерний TD следующим образом:

tr.odd td {}
tr.even td {}

Причина в том, что IE фактически применяет фоновый цвет TR, удаляя значение, установленное на TR, и применяя его к каждому отдельному TD внутри этого TR. Иногда у вас может быть css reset или другие правила css, которые переопределяют IE странным способом выполнения фонового цвета TR, поэтому это способ убедиться в этом.

Кроме того, вы можете рассмотреть возможность установки только

tr td {background-color: #EEDDEE}

и

tr.odd td {background-color: #EEEEDD}

поэтому ваш код немного менее подробный

Ответ 4

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

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

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

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

Ответ 6

Просто сделайте это и сработает:

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