title: <tr> background color only changes on even childs
body: <p>Try to click on any table row, it will only black highlight the even ones, what did I miss?<br>It was supposed to turn row backgrounds black, on click.<br>Here's my current code:<br>
  <strong>HTML:</strong><br></p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;table id="tEmprego" class="table table-striped table-hover"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;#&lt;/th&gt;
            &lt;th&gt;Table heading&lt;/th&gt;
            &lt;th&gt;Table heading&lt;/th&gt;
            &lt;th&gt;Table heading&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;1&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;2&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;3&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;4&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
            &lt;td&gt;Table cell&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong><br></p>
  
  <pre><code>.table-hover&gt;tbody&gt;tr:hover&gt;td, .table-hover&gt;tbody&gt;tr:hover&gt;th {
    background-color: #550055;
    color:#eeeeee;
  }
  
  .hovered{
     background-color: #000000;
    color:#ffffff;
  }
  </code></pre>
  
  <p><strong>Javascript:</strong><br></p>
  
  <pre><code>$("#tEmprego").on('click','td',function() {
         $(this).closest("tr").siblings().removeClass("hovered");
         $(this).parents("tr").addClass("hovered");
  });
  </code></pre>
  
  <p><strong>Bootply:</strong><br><a href="http://www.bootply.com/28I0IItFmP" rel="nofollow">http://www.bootply.com/28I0IItFmP</a></p>