<tr> background color only changes on even childs

Question

Try to click on any table row, it will only black highlight the even ones, what did I miss?
It was supposed to turn row backgrounds black, on click.
Here's my current code:
HTML:

<div class="table-responsive">
    <table id="tEmprego" class="table table-striped table-hover">
      <thead>
        <tr>
          <th>#</th>
          <th>Table heading</th>
          <th>Table heading</th>
          <th>Table heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </tbody>
    </table>
  </div>

CSS:

.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
  background-color: #550055;
  color:#eeeeee;
}

.hovered{
   background-color: #000000;
  color:#ffffff;
}

Javascript:

$("#tEmprego").on('click','td',function() {
       $(this).closest("tr").siblings().removeClass("hovered");
       $(this).parents("tr").addClass("hovered");
});

Bootply:
http://www.bootply.com/28I0IItFmP

Answer 1

The cause of it is that your css rules from bootstrap is being applied to tds, while your .hovered is being applied to tr.

Basically, when you click on it, you have grey table cells (td) over a black row (tr). You also need more weight on your selector, since .hovered is too weak and it's going to be overwritten by other rules (avoid using !important, or you could get on an infinite !important css war!):

.table-hover tbody tr.hovered td {
    background-color: #000000;
    color: #ffffff;
}

Also, you don't necessarily need to add > selectors to make the hover effect, unless you have other tables inside that one. Another thing is that your th are inside a thead, not tbody:

.table-hover tbody tr:hover td, .table-hover thead tr:hover th {
    background-color: #550055;
    color: #eeeeee;
}

Here's a fixed fork for your code:

http://www.bootply.com/mwFvWpMiGa