Css coloring table problem

Question

I've been trying to make a colored table with even rows a different color than the odd ones. The only problem I have is that I have to be able to do it even with hidden rows, because if for instance you hide row 2 then you see row 1 and row 3 the same color.

Here's what I have:

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

This code doesn't work for me since browsers don't filter :not and :nth-child according to the given order. Any suggestions?

Answer 1

Could you add a class to the visible rows so you could write it as:

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

Then use jquery to add/remove the class as you make rows visible/invisible?

Answer 2

Ended up here while trying to tackle a similar problem. Used the following JS to update the CSS based on an added class after filtering.

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

Note the flipped colors due to zero indexed arrays.