KnockoutJS table incorporating style for alternating row colors

Question

I'm using KnockoutJS in my HTML to data-bind the visibility of rows of a table to certain observable values, as defined in my accompanying JavaScript. My table looks like this:

<table class="myTable">
    <tr data-bind="if: thisRowVisible"> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: thatRowVisible"> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: anotherRowVisible"> <!-- Arbitrary data here --> </tr>
    <!-- More rows defined here -->
</table>

As the application runs, the rows of the table may be hidden or shown, by using these data-bound if values. In order to give the rows of the table alternating colors (zebra/striping), I have the following defined in my CSS:

.myTable tr:nth-child(even) td {
   background-color: black;
}
.myTable tr:nth-child(odd) td {
   background-color: gray;
}

Normally, this CSS would style the rows properly. The even rows would be colored black, and the odd rows would be colored gray. However, my problem occurs when you throw in the Knockout data-bindings.

For instance, let's say the Index #2 row is hidden, as a result of my data-binding. Even though the row is hidden, my <tr> definition for that row still exists in the table. This throws off the alternating row colors. Since Index #2 still exists, but is hidden, it is still included in the alternating row colors. This means that two gray rows will appear on top of each other.

Is there any to achieve the proper alternating table row colors, while still using my KnockoutJS pattern? Is there some trick to the KO data-binding to remove the hidden <tr> from Markup completely, so that the CSS styles are applied correctly?

Answer 1

You can use virtual elements <!-- ko 'if': thisRowVisible -->.
Working example: http://jsfiddle.net/zs4B2/1/.

Answer 2

You can assign a specific class to only visible elements and apply zebra styles only for that class. The data binding would be like the following:

<table class="myTable">
    <tr data-bind="if: thisRowVisible, attr: {'class': thisRowVisible ? 'rowVisible' : 'rowInvisible' "> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: thatRowVisible, attr: {'class': thatRowVisible ? 'rowVisible' : 'rowInvisible'"> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: thatIsNotVisible, attr: {'class': thatIsNotVisible ? 'rowVisible' : 'rowInvisible'"> <!-- Arbitrary data here --> </tr>
    <!-- More rows defined here -->
</table>

And the CSS:

.myTable tr.rowVisible:nth-child(even) td {
   background-color: black;
}
.myTable tr.rowVisible:nth-child(odd) td {
   background-color: gray;
}

FIDDLE EXAMPLE