title: Issue with alternating colors row table with selectable rows
body: <p>I am having an issue with a generated table that has alternating rows and the rows are selectable.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("tr").click(function() {
      $(this).toggleClass("highlighted");
    })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    vertical-align: top;
    margin-bottom: 15px;
    border: 1px solid #999999;
  }
  th {
    font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #F2EDEB;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #522D25 url(images/bg_header.jpg) no-repeat;
  }
  tr {
    background: #fff;
    color: #261F1D;
  }
  tr:hover,
  tr.alt:hover {
    color: #261F1D;
    background-color: #E5C37E;
  }
  .highlighted {
    color: #261F1D;
    background-color: #E5C37E;
  }
  tr.alt {
    background: #F5FAFA;
    color: #B4AA9D;
  }
  td {
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    padding: 6px 6px 6px 12px;
  }
  tr:nth-child(odd) {
    background-color: #ffffff;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table id="fooBar" border="0"&gt;
    &lt;tr&gt;
      &lt;th&gt;Text&lt;/th&gt;
      &lt;th&gt;Text&lt;/th&gt;
      &lt;th&gt;Text&lt;/th&gt;
      &lt;th&gt;Text&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr class=""&gt;
      &lt;td&gt;Text&lt;/td&gt;
      &lt;td&gt;image&lt;/td&gt;
      &lt;td&gt;Text&lt;/td&gt;
      &lt;td&gt;image&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=""&gt;
      &lt;td&gt;Text&lt;/td&gt;
      &lt;td&gt;image&lt;/td&gt;
      &lt;td&gt;Text&lt;/td&gt;
      &lt;td&gt;image&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=""&gt;
      &lt;td&gt;Text&lt;/td&gt;
      &lt;td&gt;image&lt;/td&gt;
      &lt;td&gt;Text&lt;/td&gt;
      &lt;td&gt;image&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr class=""&gt;
      &lt;td&gt;Text&lt;/td&gt;
      &lt;td&gt;image&lt;/td&gt;
      &lt;td&gt;Text&lt;/td&gt;
      &lt;td&gt;image&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My problem is this: If I put the alternating colors, the select row table function does not work, if I remove it ... it works again. Any Ideas?</p>
  
  <p>I need to dynamically create a table with alternating rows that are selectable. I want to be able to use something very basic, don't need all functionality of datatables library. </p>