使用 jquery onclick 函数覆盖引导表条带行答案

【问题标题】：Overriding bootstrap table-striped rows with jquery onclick function使用 jquery onclick 函数覆盖引导表条带行
【发布时间】：2017-05-11 11:21:00
【问题描述】：

大家好。我使用 bootstrap 4 表类来构建图像中显示的表，包括为表提供备用行 bg-colors 的表条带类。然后，我使用 jquery 函数将突出显示的行设为深蓝色 bg-color。

一切都按预期工作，除了从 jquery 函数获得的 bg-color 不会覆盖表的备用（灰色）行，它只适用于白色行。有没有办法使这项工作？即让函数覆盖灰色行和白色行的颜色？我不想停止使用 bootstrap table-striped 类。

下面是我正在使用的 jquery 函数：

$('tbody tr').click(function(){
     var selected = $(this).hasClass("highlight");
     $("tbody tr").removeClass("highlight");
     if(!selected)
        $(this).addClass("highlight");
});

【问题讨论】：

您尝试!important 参加您的highlight 课程了吗？
您正在尝试覆盖悬停元素的突出显示并尝试使用点击设置类。改用hover 函数。
试试下面的这个链接。 fiddle.jshell.net/fhh8yz6z

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

在指向引导 CSS 的链接之后使用指向您的 CSS 文件的链接。例如：

<head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    ...
    <link rel="stylesheet" type="text/css" href="mytheme.css">
</head>

注意，您可以将任何查询字符串添加到您的 CSS 文件 URL 以避免缓存问题：

<link rel="stylesheet" href="mytheme.css?version=new">

您也可以在 CSS 中使用 !important 规则作为最后的手段。

.highlight {
  background-color: red !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="table-responsive">
  <table class="table table-bordered table-striped">
    <colgroup>
      <col class="col-xs-1">
      <col class="col-xs-7"> </colgroup>
    <thead>
      <tr>
        <th>Class</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Text</th>
        <td>Text</td>
      </tr>
      <tr>
        <th scope="row">Text</th>
        <td>Text</td>
      </tr>
      <tr class="highlight">
        <th scope="row">Text</th>
        <td>highlited row</td>
      </tr>
      <tr>
        <th scope="row">Text</th>
        <td>Text</td>
      </tr>
      <tr>
        <th scope="row">Text</th>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

这太棒了@Alexander， !important 值有效，但重新排列链接引用没有。无论如何谢谢你的帮助