The background color <tr> only changes to even child elements

Question

Try to click on any row of the table, it will only be black even, what did I miss?
It was assumed that the background color of the line would be black by clicking.
Here is 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"); }); 

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

Answer 1

The reason for this is because your css rules from bootstrap apply to td s, and your .hovered applies to tr .

Basically, when you click on it, you have the gray cells of the table ( td ) along the black line ( tr ). You also need more weight for your selector, since .hovered too weak and will be overwritten by other rules (avoid using !important , or you can go through an endless css war!):

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

In addition, you do not have to add a > selector to make the effect freeze if it has no other tables. Another thing is that your th is inside 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

Answer 2

The background color tr rewritten in favor of a more specific rule defined in Bootstrap, which applies only to lines with odd numbers:

 .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: #f9f9f9; } 

You will need to write a more specific rule for rows of table cells, for example:

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

http://www.bootply.com/yptfNtx2iN

Answer 3

Your .table-striped class calls this.

One option is to simply delete it.

Bootply Demo

Answer 4

Bootply : http://www.bootply.com/vMiwF3v4cl

CSS :

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

Answer 5

Try this - is that what you had in mind http://www.bootply.com/t7fsAfqZDp ?

 $(document).on('click',"#tEmprego",function() { //click on whole table $(this).find('tr').filter(function(item){ //get tr and filter only odd/even ones return $(item).index() % 2 }).toggleClass("hovered"); //change class on them }); 

Answer 6

There is a class in bootstrap.min.css :

 .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: #f9f9f9; } 

This is one background-color for odd td.