<tr>背景颜色仅在偶数孩子身上发生变化

Question

尝试点击任何表格行,它只会突出显示偶数,我错过了什么？
它应该在点击时将行背景变成黑色.
这是我目前的代码:
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

它的原因是,从引导你的CSS规则被应用到tdS,而你的.hovered被应用到tr.

基本上,当您单击它时,您td在黑色行(tr)上有灰色表格单元格().你的选择器也需要更多的重量,因为.hovered它太弱而且会被其他规则覆盖(避免使用!important,或者你可以进行无限的!importantcss战争!):

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

此外,您不一定需要添加>选择器来实现悬停效果,除非您在其中有其他表.另一件事是你th在里面thead,而不是tbody:

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

这是代码的固定分叉:

http://www.bootply.com/mwFvWpMiGa

Answer 2

您的tr背景颜色正在被覆盖,以支持Bootstrap中特定的更具体的规则,该规则仅适用于奇数行:

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

您需要为表格单元格行编写更具体的规则,例如:

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

http://www.bootply.com/yptfNtx2iN