<tr> 背景颜色只在偶数子元素上改变答案

【问题标题】：<tr> background color only changes on even childs<tr> 背景颜色只在偶数子元素上改变
【发布时间】：2014-10-20 06:14:35
【问题描述】：

尝试点击任何表格行，它只会黑色突出显示偶数行，我错过了什么？
它应该在点击时将行背景变为黑色。
这是我当前的代码：
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");
});

引导：
http://www.bootply.com/28I0IItFmP

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

您的.table-striped 班级导致了这种情况。

一种选择是简单地删除它。

Bootply Demo

【讨论】：

更具体地说，tr 是黑色样式，但白色来自 bootstrap.min.css 中的 .table-striped>tbody>tr:nth-child(odd)>td 选择器。你的tds 是白色的，覆盖了你的trs
感谢您的补充说明！

【解决方案2】：

引导层：http://www.bootply.com/vMiwF3v4cl

CSS：

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

【讨论】：

【解决方案3】：

您的 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

【讨论】：

【解决方案4】：

试试这个 - 你的意思是 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
});

【讨论】：

您也应该在答案中包含相关代码。

【解决方案5】：

bootstrap.min.css中有一个类：

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

这一集background-color 为奇数。

【讨论】：

【解决方案6】：

其原因是您的引导程序中的 css 规则被应用于tds，而您的.hovered 被应用于tr。

基本上，当您单击它时，黑色行 (tr) 上有灰色的表格单元格 (td)。您还需要在选择器上增加权重，因为 .hovered 太弱并且会被其他规则覆盖（避免使用 !important，否则您可能会陷入无限的 !important CSS 战争！）：

.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

【讨论】：

【解决方案7】：

您必须在每一行的点击事件中为该行设置一个类（例如：选中）。然后还为每个 td 添加更具体的 css 样式。

在这里你定义：找到一个带有 .table 和 table-striped 类的表和带有 .selected 类的行，并将内部 td 的背景颜色设置为指定颜色：

table.table.table-striped tr.selected td {
    background-color: #color;
}

【讨论】：