nth-child (четный) в tablerow/data

У меня возникли некоторые трудности с тем, чтобы nth-child(even) css работал прямо в моей строке таблицы.

Я также создал скрипт для вас, чтобы увидеть, в чем проблема: http://jsfiddle.net/jn9q8/

У меня есть система фильтрации, в которой я делю издателей по определенным странам. Если вы нажмете «ВСЕ» вверху, вы получите всех издателей, и n-й дочерний элемент (четный) работает там правильно, давая каждой второй строке таблицы серый фон позади нее.

Если вы затем нажмете «EST», вы увидите, что nth-child (even) больше не работает так, как должен. Вы видите, например, две серые фоновые линии вместе подряд, потому что некоторые издатели в категории «ВСЕ» не принадлежат к «EST», и стиль nth-child, конечно, не знает об этом.

Я оформляю это так:

       table.pubTable tr:nth-child(even) td{
       background-color: #dcdcdc;
       width: 627px;
       height: 26px;
       padding-top: 12px;
       }

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


html jquery css css-selectors css-tables
person SmalliSax    schedule 24.02.2014    source источник
comment
строки отсортированы по странам?   -  person Salman A    schedule 24.02.2014
comment
Привет, Салман А. Их быть не должно, каждый издатель находится внутри строки таблицы и имеет табличные данные. Затем издатели сортируются по странам.   -  person SmalliSax    schedule 24.02.2014

Ответы (2)


arrow_upward
2
arrow_downward

Сокрытие и элемент не удаляют его, поэтому, что касается CSS, элемент все еще существует и все еще должен учитываться для целей nth-child.

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

person Niet the Dark Absol    schedule 24.02.2014
comment
Привет @Niet, спасибо за ваше предложение. Я не хочу держать ветку открытой немного дольше и посмотреть, смогу ли я добавить больше идей, если нет, я отмечу ваши ответы сегодня позже. Спасибо! - person SmalliSax; 24.02.2014
comment
Когда вы говорите клонировать таблицу, вы имеете в виду в основном копирование/вставку всего тела таблицы, которое будет действовать как шаблон? (Неплохо бы подсказку относительно затухания отображаемой таблицы) Я довольно новичок в этом, так что извините за мои небольшие знания. - person SmalliSax; 24.02.2014
comment
В Vanilla JS это так же просто, как theTable.cloneNode(true). - person Niet the Dark Absol; 24.02.2014

arrow_upward
0
arrow_downward

Причина проблемы заключается в том, что ваш код CSS добавляет стиль ко всем tr, поэтому, даже если вы скрываете некоторые tr, они остаются в dom и включаются в нечетные четные.

Один из подходов, который вы можете попробовать, сначала добавьте класс с именем show ко всем строкам, а затем ваш css будет

table.pubTable tr.show:nth-child(even) td{
       background-color: #dcdcdc;
       width: 627px;
       height: 26px;
       padding-top: 12px;
       }

table.putTable tr.hide{
    display:none;
}

теперь, когда вы применили фильтр, чтобы все эти строки не отображались, удалите class show и добавьте class hide, теперь ваш стиль фильтрует только tr.show, поэтому он будет считаться четным и нечетным только на видимых tr.show, и вы получите что вы хотите.

person Ravi Kumar    schedule 24.02.2014
comment
nth-child не принимает во внимание классы - фактически, даже nth-of-type не учитывает, поскольку учитывает только имена узлов. - person Niet the Dark Absol; 24.02.2014