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

原因是你的td的{c}规则被应用于.hovered，而tr被应用于td。

基本上，当您点击它时，在黑色行（tr）上有灰色表格单元格（.hovered）。你的选择器也需要更多的权重，因为!important太弱而且会被其他规则覆盖（避免使用!important，或者你可以进行无限.table-hover tbody tr.hovered td { background-color: #000000; color: #ffffff; } css战争！）：

此外，您不一定需要添加th选择器来制作悬停效果，除非您在其中有其他表。另一件事是您的thead位于tbody内，而不是.table-hover tbody tr:hover td, .table-hover thead tr:hover th { background-color: #550055; color: #eeeeee; }：

{{1}}

这是代码的固定分支：

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

Answer 3

你的.table-striped课正在造成这种情况。

一种选择就是删除它。

Bootply Demo

Answer 4

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

CSS ：

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

Answer 5

试试这个 - 你的意思是http://www.bootply.com/t7fsAfqZDp吗？

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

Answer 6

bootstrap.min.css中有一个班级：

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

这一套将background-color设置为奇数td＆＃39;

背景颜色只会改变偶数孩子

6 个答案:

Bootply Demo