nth-child(even) on tablerow/data

Question

I'm having a bit of a struggle with making the nth-child(even) css work right on my table row.

I created a fiddle for you too see what the problem is: http://jsfiddle.net/jn9q8/

I have this filtering system where I divide publishers after certain countries. If you click "ALL" at the top you get all the publishers and the nth-child(even) is working properly there by giving every second table row a grey background behind it.

If you then click "EST" you see that the nth-child(even) is no longer working like it should there. You see for example 2 grey background lines together in a row because some of the publishers in the "ALL" category don't belong in "EST", and the nth-child styling of course doesn't know that.

I style it like so:

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

Would there be any other way to make it work so no matter what category you would click on the background color would always be even on every publisher ?

Answer 1

Hiding and element does not remove it, therefore as far as CSS is concerned, the element is still there and should still be counted for the purposes of nth-child.

My suggestion would be to clone the table to act as a "template". Then, when changing the displayed rows, create a clone from this "template" and remove the rows from it that should not be shown. Then, you can fade out the displayed table, and fade in the new one.

Answer 2

The reason for the problem is due to your css code you are adding the style to all tr so even if you hide some tr it remains in dom and included in odd even.

One approach you can try initially add a class called show to all the rows and then your css will be

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

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

now once you applied filter so all those rows need not to be shown remove class show and and add class hide now your style is filtering only tr.show so it will count even and odd only on tr.show which are visible and you will get what you want.