title: Table row background color do not change when using alternate table row
body: <p>I have a table and it has <code>class="priority-table"</code>. And I have the following CSS for alternate row colors and hover colors. </p>
  
  <pre><code>.priority-table tr td{
    white-space:nowrap;
  }
  .priority-table tr:hover{
    background-color: #E6E6FA;
  }
  
  .priority-table tr:hover:nth-child(even) {
    background-color: #E6E6FA;
  }
  
  .priority-table tr:nth-child(even) {
    background-color: #ffffff;
  }
  
  .highlight{
    background-color: red;
  }
  </code></pre>
  
  <p>I want to mark a row red when clicked so I added this jQuery</p>
  
  <pre><code>$(".priority-table tr:odd").click(function() {
    console.log('first');
    $(this).toggleClass("highlight");
  });
  
  $(".priority-table tr:even").click(function() {
    console.log('second');
    $(this).toggleClass("highlight");
  });
  
  $(".priority-table tr").click(function() {
    $(this).toggleClass("highlight");
  });
  </code></pre>
  
  <p>This only marks even columns red. But I want to keep all columns that I click marked red. How can I do this?</p>