Цвет строки чередующейся таблицы?

Question

При создании табличных данных в формате html я просто хотел узнать, какие методы вы используете для изменения цвета строки таблицы?В своих целях я использую Java и JSP на сервере.Я просто планировал перебирать данные, и если index % 2 == 0 установить его на один цвет, else установить его на что-то другое.Это нормально?Может быть, было бы лучше, если бы я использовал какую-нибудь библиотеку тегов?

Answer 1

Если вы можете использовать JSTL (очень похоже на Java-подобное решение, но лучше),

<c:forEach var="myItem" items="${myCollection}" varStatus="loop">
<tr class="${loop.index % 2 == 0 ? 'even' : 'odd'}">
...
</tr>
</c:forEach>

Теперь есть классы CSS для определения цветов или других стилей.

Вы также можете использовать тег 'display', который делает то же самое на стороне сервера или jQuery на стороне клиента, чтобы выбирать строки с нечетными, четными селекторами и добавлять классы.

Answer 2

Это самое простое решение, которое работает с большинством браузеров.См. этот ответ для более подробного обсуждения.Если вы можете избежать IE6, тогда вы можете использовать псевдоселекторы CSS для достижения того же эффекта.Или вы можете использовать JavaScript .

Если вам нужно глобальное решение (т. Е. Решение, которое работает для всех ваших таблиц без необходимости делать это в нескольких местах), вы можете использовать фильтри разбирать HTML.Пока вы сохраняете ваш HTML чистым, фильтр может быть довольно дамп (просто прочитайте в буфер до следующего ">", затем проверьте, какой у вас есть тег, добавьте отсутствующий атрибут для TR и очистите буфер).

Наконец, вы можете обернуть ваши таблицы в общий API (например, getColumns(), getRows() и getCell()) и использовать один JSP для их рендеринга.

Что касается библиотек тегов:Если у вас есть, используйте его.Если вы этого не сделаете, то вы можете быть быстрее, если вообще избегаете JSP и вместо этого пишете вспомогательный класс для форматирования такой таблицы в чистой Java.Таким образом, вы можете легко писать модульные тесты и разрабатывать свое решение без необходимости постоянно перезагружать веб-сервер.

Answer 3

Самый простой и приятный способ - использовать css nth-child - но, к сожалению, он не поддерживается IE.так что, если вам нужен IE-совместимый способ, то все, что вы делаете, это нормально.

РЕДАКТИРОВАТЬ: решение css будет выглядеть так:

tbody:nth-child(2n) { /* even rows */ 
  background-color:#eee;
}     
tbody:nth-child(2n+1) { /* odd rows */
  background-color:#ccc;
}     

Answer 4

mootools зебра.У Дэвида Уолша хорошая рецензия http://davidwalsh.name/mootools-zebra-tables-plugin

Answer 5

Если вы уже используете jQuery, попробуйте использовать четный (или нечетный) селектор. Существует даже пример раскраски строк таблицы на странице документации для селектора четных .

Answer 6

Мы предпочитаем использовать JavaScript для раскраски строк таблицы на стороне клиента.Это даже уменьшает (небольшую) нагрузку на сервер.Однако это не является предпочтительным для больших таблиц (> 100 строк)

Answer 7

Общее правило JSP - не чередовать код Java в вашем JSP, а использовать теги, которые инкапсулируют этот код Java.Так что, будь я на вашем месте, я бы избегал индекса% 2 == 0.

Вы можете сделать это в CSS3, используя даже псевдоселектор.У W3 есть пример .