Как чередовать цвета строк таблицы 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 содержит дополнительную информацию о < библиотека тегов code> core и то, что она вам дает.

Answer 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

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

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

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

Answer 5

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

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

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

Answer 6

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

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>