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

StackOverflow https://stackoverflow.com/questions/474216

  •  19-08-2019
  •  | 
  •  

Вопрос

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

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

<Ч>

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

Это было полезно?

Решение

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

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

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

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

Другие советы

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

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

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

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

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

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

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

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

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

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

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

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

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

Это зависит от вашего сценария. Основанный на JavaScript может быть быстрее реализован для ряда строк, если таблица не создается на лету. Однако, если вы динамически создаете свою таблицу, вы можете легко установить класс для каждой второй строки равным & Quot; row_alternate & Quot; - Я предпочитаю метод на стороне сервера, если вы обеспокоены тем, что некоторые из ваших пользователей могут не иметь JavaScript.

Если вы используете какой-либо тип фреймворка, это обычно одна из первых функций, которые они включают.

Иначе я погуглил на " чередование цветов таблицы jscript " и получил несколько десятков ссылок на методы.

(Кроме того, очень жаль, что разработчики никогда не получают кредит за код, который они не писали .)

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top