Выбор каждой второй видимой строки таблицы

У меня есть таблица с древовидной структурой (супер- и подкатегории). Когда пользователь щелкает суперкатегорию, свойство display дочерних элементов переключается.

Теперь я хочу добавить чередующийся цвет фона для каждой второй строки таблицы - но, конечно, принимая во внимание только те, которые в настоящее время видны. Ниже приведен упрощенный пример структуры:

<table>
    <tr data-level="0"><td>Super 1</td></tr>
    <tr class="hide" data-level="1"><td>Sub 1</td></tr>
    <tr data-level="0"><td>Super 2</td></tr>
    <tr class="hide" data-level="1"><td>Sub 2</td></tr>
    <tr class="hide" data-level="1"><td>Sub 3</td></tr>
    <tr class="hide" data-level="1"><td>Sub 4</td></tr>
</table>

Когда пользователь нажимает на элемент «Super 2», классы «скрытия» удаляются из дочерних элементов.

Я пробовал несколько селекторов, например:

/* Ugly result (dosn't recognize that elements are hidden) */
tr:nth-child(2n)
{
    background-color: grey;
}

/* Doesn't work at all */
tr:visible:nth-child(2n)
{
    background-color: grey;
}

/* Not what I inteded to do */
tr:not(.hide):nth-child(2n)
{
    background-color: grey;
}

Надеюсь, я понял, что хочу делать.

Возможно ли это с помощью CSS, или я должен написать сценарий JS, который пересчитывает четные и нечетные строки всякий раз, когда что-либо изменяется? Заранее благодарим за любые подсказки!


html css css-selectors
person Oromis    schedule 11.03.2012    source источник
comment
Об этом часто спрашивают - типичный ответ заключается в том, что это невозможно с чистым CSS (возможно, до CSS4), поэтому пока вам нужно делать все это на JS. Фактически, селектор :visible - это действительно нестандартный селектор, который присутствует в jQuery / Sizzle и, возможно, в паре других библиотек.   -  person BoltClock    schedule 11.03.2012
comment
возможный дубликат стиля с использованием nth-child чтобы обновлять формат таблицы (чередующиеся цвета строк)   -  person BoltClock    schedule 11.03.2012

Ответы (3)


arrow_upward
1
arrow_downward

Этот фрагмент jQuery выполнит свою работу:

$('tr').removeClass('alternate')​
$('tr:not(.hide):odd').addClass('alternate')​

Поиграйте с ним в jsFiddle

person Manuel Ebert    schedule 11.03.2012
comment
Откуда взялся класс alternate? - person Bernhard Döbler; 16.08.2016

arrow_upward
2
arrow_downward

Вы сказали, что класс hide удаляется по щелчку.
Не усложняйте и добавьте класс IE: "show".

.show tr:nth-child(odd)    { background-color:#eee; }
.show tr:nth-child(even)   { background-color:#fff; }

Изменить:
Я обвиняю истощение, но я думаю, что это может быть правильный синтаксис.

tr.show:nth-child(odd)    { background-color:#eee; }
tr.show:nth-child(even)   { background-color:#fff; }
person Bradmage    schedule 11.03.2012
comment
Это не работает аналогично третьему правилу в коде OP. См. Возможную повторяющуюся ссылку, которую я только что добавил. - person BoltClock; 11.03.2012
comment
У меня еще не было возможности проверить это. Но разница в том, что мой ответ предполагает возможность добавления шоу класса в соответствующие TR на основе ... классы скрытия удалены ... Что, я уверен, должно обойти проблему с помощью tr: not (.hide) : nth-child. Определенно любопытно, я еще посмотрю сегодня вечером. - person Bradmage; 11.03.2012

arrow_upward
1
arrow_downward

Современный и более быстрый способ выполнить работу:

$('tr').removeClass();
$('tr:not(:hidden)').filter(':odd').addClass('odd');

Затем вы можете стилизовать эти нечетные строки в CSS с помощью .odd {}

person lapin    schedule 08.12.2014
comment
Откуда взялся класс odd? - person Bernhard Döbler; 16.08.2016
comment
@ BernhardDöbler Я только что обновил ответ. Речь идет о выделении каждой второй видимой строки, которую выполняет: $('tr:not(:hidden)').filter(':odd'). Затем я просто добавляю к этим строкам класс .odd, чтобы я мог легко стилизовать их в CSS. Выбранный ответ делает то же самое, но менее эффективен. - person lapin; 18.08.2016