一切都按预期工作,除了从jquery函数获得的bg颜色,不会覆盖表的备用(灰色)行,它只适用于白色行。有没有办法让这项工作?即使该功能覆盖灰色行和白色行的颜色?我不想不得不停止使用bootstrap table-striped类。
下面的是我使用的jquery函数:
$('tbody tr').click(function(){
var selected = $(this).hasClass("highlight");
$("tbody tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});
答案 0 :(得分:1)
链接到bootstrap 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>