Каков лучший способ стилизации чередующихся строк в таблице?

Question

Очевидно, что фактический стиль нечетных / четных строк будет выполняться с помощью класса CSS, но как лучше всего «прикрепить» класс к строкам? Лучше поместить это в разметку, или это лучше сделать через клиентский JavaScript? Что лучше и почему?

Для простоты, давайте предположим, что это большая таблица, 100 строк, и что цветовая схема чередует нечетные / четные строки. Кроме того, в другом месте страницы нужна какая-то библиотека javascript, которая может легко это сделать, поэтому накладные расходы этого пакета не имеют значения.

---

Настоящая цель этого вопроса состоит в том, чтобы определить, какие компромиссы связаны, а также как эти компромиссы должны обрабатываться, например, снижение производительности сервера, если страница попадает под нагрузкой (предположим, динамическая таблица) хиты пропускной способности для пользователей с более низкой скоростью соединения, семантические хиты путем добавления дополнительного кода макета в HTML (идея заключается в том, что HTML предназначен для контента, CSS предназначен для макета, а javascript предназначен для поведения контента, а также для управления / расширения макет)

Answer 1

Вы можете сделать это довольно легко с помощью jQuery, например:

$(function(){
    $('tr:even').addClass('alternateClass');
    $('tr:odd').addClass('mainClass');
});

Вы можете квалифицировать селектор немного больше, если вы просто хотите сделать это для одной конкретной таблицы или для элементов 'li'.

Я думаю, что это немного чище и более читабельно на стороне клиента, чем это было бы в некоторых средах на стороне сервера,

Answer 2

Я бы поместил его в разметку (на стороне сервера). Для завершения сервера требуется менее миллисекунды. rowNum = (rowNum - 1) * -1 Моя любимая мозоль, когда веб-сайт работает медленно из-за того, сколько исполняется JavaScript.

Answer 3

Как сказано в других ответах, выполнение этого на большой таблице на стороне клиента будет медленнее, чем на стороне сервера, и может не работать, если пользователь отключил JavaScript.

Однако использование JS-фреймворка, такого как jQuery , делает его настолько простым, что это действительно заманчиво:

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});

Answer 4

То, что вы пытаетесь достичь, можно даже сделать с помощью CSS3:

tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }

Это также указано в спецификации селекторов css3 в w3 . Если вы ищете совместимость, добавление класса на стороне сервера или через javascript было бы гораздо лучшим решением.

Answer 5

Когда-нибудь мы сможем использовать чистый CSS . Конечно, эта часть спецификации CSS была введена в 2001 и до сих пор не поддерживается. = (

Answer 6

Первоначально я бы сделал это на стороне сервера, поскольку на клиенте может быть не включен JavaScript. Если вы добавляете / удаляете строки на стороне клиента с помощью javascript, то вы можете также захотеть сделать это на клиенте после завершения события добавления / удаления. Насколько это возможно, вы должны стараться, чтобы ваш интерфейс вел себя хорошо без Javascript, если вы не можете контролировать среду браузера (скажем, в приложении интрасети, где вы можете требовать, чтобы он был включен).

Answer 7

Для таблицы такого большого размера я бы выполнял обработку строк на стороне сервера, используя PHP или аналогичный метод для вычисления нечетных / четных имен классов для каждой строки. Это решение будет работать для тех, у кого отключен JavaScript, и производительность будет намного выше, чем у любой библиотеки JavaScript, обрабатывающей элемент таблицы такого размера.

В PHP логика будет выглядеть примерно так:

foreach($rows as $i => $row) {
    $class = ($i % 2 == 0) ? 'even' : 'odd';
}

Если вы не можете выполнять какую-либо обработку на стороне сервера, я бы рекомендовал, чтобы JavaScript устанавливал теги классов для каждой строки, а не управлял стилями напрямую. Таким образом, презентация остается за CSS, а поведение - за JavaScript, и если вы измените способ генерации классов позднее, код презентации останется прежним.

Answer 8

Я бы сказал, что это зависит от ситуации. Если вы перебираете данные для создания строк на стороне сервера, я бы сказал, что вы должны сделать это там.

Это становится намного сложнее, если вы собираетесь начать использовать клиентский скрипт для сортировки / переупорядочения строк. В этом случае, если это 100 строк или около того, я мог бы быть склонен сделать это на стороне клиента события onload, потому что по крайней мере таким образом вы не дублируете код для определения цвета строки. Я признаю, это действительно зависит от скорости в этом случае. Вероятно, я бы попробовал и посмотрел, приемлемо ли выступление, прежде чем принимать окончательное решение.

Answer 9

Я нашел хороший сайт, объясняющий, чего вы хотите достичь с помощью jquery:

Вот окончательный результат- http://15daysofjquery.com/examples/zebra/code/demoFinal.php

А вот и учебник http://15daysofjquery.com/examples/zebra/

Answer 10

Я всегда применяю класс на стороне сервера, так как они выводятся / добавляются на страницу, но если у вас есть клиентская повторная сортировка, строки необходимо будет повторно классифицировать.