CODEWITHSUNDEEP
jquerycsshtmlhtml-table
Oam Psy
Oam Psy

Reputation: 8663

HTML Table Alternate Row Colours With Hidden Rows

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.

Upvotes: 2

Views: 3531

Answers (4)

Nico O
Nico O

Reputation: 14102

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"); 
    }

Upvotes: 6

dhana
dhana

Reputation: 6525

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')
        }
    });
    });

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

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?

Upvotes: 2

user1482965
user1482965

Reputation: 1

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.

Upvotes: 0

Related Questions