Css задача раскраски таблицы

Question

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

Вот что у меня есть:

tr:not([display="none"]):nth-child(even){
    background: #EFEFFF;
}
tr:not([display="none"]):nth-child(odd){
    background: #E0E0FF;
}

Этот код не работает для меня, так как браузеры не фильтруют: not и: nth-child в соответствии с заданным порядком.Есть предложения?

Answer 1

Не могли бы вы добавить класс к видимым строкам, чтобы вы могли написать его следующим образом:

tr.visible:nth-child(even) {
    background: #EFEFFF;
}
tr.visible:nth-child(odd){
    background: #E0E0FF;
}

Затем используйте jquery для добавления / удаления класса, когда вы делаете строки видимыми / невидимыми?

Answer 2

Закончено здесь при попытке решить аналогичную проблему.Использовал следующий JS для обновления CSS на основе добавленного класса после фильтрации.

$('tr.visible').filter(':odd').css('background-color', '#EFEFFF');
$('tr.visible').filter(':even').css('background-color', '#E0E0FF');

Обратите внимание на перевернутые цвета из-за нулевых индексированных массивов.