2

I'm trying to write simple table with alternate colors of rows.

This is pretty straight forward an have achieved the expected outcome, the issue I am facing is when I have a hidden row, the colour pattern runs into issues.

Here is my fiddle: http://jsfiddle.net/oampz/2Wt49/

As you can see, when you click on the ' + ' the table expands and the rows colours alternate, but when the table is collapsed, there are issues in colours.

Here is my HTML:

 <table id="bs-search-results" class="tbl tbl--highlight stripes half-mb"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Height</th> <th>Weight</th> </tr> </thead> <tbody> <tr> <td class="ShowMe">+ 0000111</td> <td>0000111</td> <td>0000111</td> <td>0000111</td> </tr> <tr id="itsHidden" class="visuallyhidden"> <td>0000222</td> <td>0000222</td> <td>0000222</td> <td>0000222</td> </tr> <tr> <td>0000333</td> <td>0000333</td> <td>0000333</td> <td>0000333</td> </tr> <tr> <td>0000444</td> <td>0000444</td> <td>0000444</td> <td>0000444</td> </tr> </tbody> </table>

Here is my CSS:

table { border-collapse: collapse; border-spacing: 0; width: 100%; } th { min-width: 22px; } .stripes tbody > tr:nth-child(2n+2) { background: #f2f2f2; } .stripes li:nth-child(2n+2) { background: #f2f2f2; } .tbl { border: 1px solid #d1d1d1; font-size: 12px; font-size: 0.75rem; line-height: 2; clear: both; } .tbl th, .tbl td { padding: 3px; text-align: left; border-right: 1px solid #d1d1d1; } .tbl th { border-bottom: 1px solid #d1d1d1; } .tbl--highlight tbody tr:hover { background: #d4e8fc; cursor: pointer; } .tbl--input td { overflow: hidden; } .half-mb { margin: 0 0 12px 0; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

Any help appreciated.

Improve this question

4 Answers 4

Reset to default
6

There seems not be a solution with plain CSS for that at the moment. nth-child is working correctly. The table has children which are there- visible or not. So you will need to have a javascript solution. I've updated your fiddle: http://jsfiddle.net/2Wt49/9/

it is implementing a jQuery function, that looks like this:

 function stripeTable(){ $("table.stripes tr").removeClass("odd"); $("table.stripes tr:visible:odd").addClass("odd"); }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

I've made some changes to your jsfiddle example and have got it working...

http://jsfiddle.net/2Wt49/10/

I added the following function...

function setRowClasses() { $("#bs-search-results tbody tr") .removeClass("even") .filter(function() { return $(this).height() != 1; }) .each(function(i) { if (i % 2 == 0) $(this).addClass("even"); }); }

That sets a class to each even numbered visible row and it's that class that affects the styling, rather than using css to determine whether it's an odd or even row.

That function then needs to be called onload/onready and when you toggle any rows in the table.

Out of curiosity, is there a reason you're not just setting visuallyhidden to display:none?

Improve this answer

5 Comments

thanks Archer! Your example seems to work fine, Nico O's answer is working too, but much simpler, is there are there any pro's and con's of each?
That comes down to my question at the end. The answer by Nico is obviously cleaner, but won't work with your original css since you're not setting the visible state of the elements. What you do does make it so that you can't see the hidden rows, but they're still classed as visible by jQuery selectors, which is why I ended up filtering by height in my answer. If you can change your css to use display:none for the hidden rows then Nico's answer is definitely the better choice.
Oh yes. Sorry i butchered your css ;) Nice answer @Archer
Thanks @NicoO - I prefer your answer. It's much nicer looking (AKA easier to understand) than that thing above :p
it's more lazy and i kind of sheeted (pun intended;). Your Answer is the correct one with unchanged CSS.
0

The nth-child or nth-of-type pseudo-classes will always count all the elements, regardless of whether they are visible. I can think of two ways of achieving the zebra stripe with hidden rows:

  1. Add class names to the rows, using JavaScript to adjust the class names when you show or hide rows.
  2. Use a repeating striped background on the table as a whole, with each stripe being the same height as a table row.
Improve this answer

Comments

0

try this,

Here is demo http://jsfiddle.net/dhana36/2Wt49/14/

$(".ShowMe").click(function() { $("#itsHidden").toggleClass("visuallyhidden"); $("#itsHidden2").toggleClass("visuallyhidden"); $('tbody tr').not('.visuallyhidden').each(function(index,el){ if(index%2 != 0){ $(this).css('background','#f2f2f2') } else{ $(this).css('background','#fff') } }); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.