title: KnockoutJS table incorporating style for alternating row colors
body: <p>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:</p>
  
  <pre><code>&lt;table class="myTable"&gt;
      &lt;tr data-bind="if: thisRowVisible"&gt; &lt;!-- Arbitrary data here --&gt; &lt;/tr&gt;
      &lt;tr data-bind="if: thatRowVisible"&gt; &lt;!-- Arbitrary data here --&gt; &lt;/tr&gt;
      &lt;tr data-bind="if: anotherRowVisible"&gt; &lt;!-- Arbitrary data here --&gt; &lt;/tr&gt;
      &lt;!-- More rows defined here --&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>As the application runs, the rows of the table may be hidden or shown, by using these data-bound <code>if</code> values. In order to give the rows of the table alternating colors (zebra/striping), I have the following defined in my CSS:</p>
  
  <pre><code>.myTable tr:nth-child(even) td {
     background-color: black;
  }
  .myTable tr:nth-child(odd) td {
     background-color: gray;
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>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 <code>&lt;tr&gt;</code> 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. </p>
  
  <p>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 <code>&lt;tr&gt;</code> from Markup completely, so that the CSS styles are applied correctly?</p>