gpt4 book ai didi

javascript - 使用 jquery onclick 函数覆盖 Bootstrap 表 strip 化行

转载 作者:行者123 更新时间:2023-11-28 15:37:59 25 4
gpt4 key购买 nike

enter image description here

大家好。我已经使用 bootstrap 4 表类来构建图中所示的表,包括 table-striped 类,它为表提供了备用行 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");
});

最佳答案

在链接到 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>

关于javascript - 使用 jquery onclick 函数覆盖 Bootstrap 表 strip 化行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43913955/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com