Не использовать CSS-классы на каждом TD для стилизации;используя JQuery

Question

Обычно я помечаю первый TD в строке формы с классом "header", а смежный TD с классом "data".

Вместо записи всего этого в HTML я использую следующий jQuery:

$("tr").find("td:eq(0)").addClass("header");
$("tr").find("td:eq(1)").addClass("data");

Это эффективно?

Answer 1

Было бы быстрее и эффективнее использовать CSS.Следующий css будет иметь тот же эффект.

td:first-child {background-color:blue;}
td:first-child + td {background-color:yellow;}

Также зависит от того, насколько велика ваша таблица.

Answer 2

Эффективное?Да
Легко читать и поддерживать?Не так много

Answer 3

Это зависит от того, как вы определяете эффективность.Это меньше кода для вас, чтобы написать?Конечно.

Будет ли это быстрее или медленнее выполняться в браузере, чем обычный CSS?Обычно медленнее.Насколько это зависит от браузера клиента, а также от структуры и размера таблицы.

Большая таблица, очевидно, займет больше времени для выполнения JavaScript.Большой в этом случае может быть сотнями (или тысячами) строк в зависимости от браузера.Дольше может означать 500 мс или около того.Более новые браузеры имеют более быстрое время выполнения javascript, поэтому это может даже не быть заметным.

Однако, если ваша таблица структурирована правильно (например, вы используете table-layout: fixed) и имеете точно определенные ширины (например, вы не используетепроценты или что-либо еще, что требует вычисления), тогда самый быстрый из возможных методов рендеринга - просто установить атрибут класса в html.

Answer 4

достаточно эффективно.

Некоторые способы оптимизации:

1. $("#someid tr").find... // the ID will narrow the scope of the search
2. Можете ли вы применить класс данных просто как стиль TR по умолчанию, а затем специфицировать уникальный TR как класс заголовка?

Answer 5

Это, очевидно, более эффективно с точки зрения пространства в большом масштабе.Менее эффективен для людей, которые просматривают / выполняют ваш документ, если перед просмотром нужно запустить много javascript.