用jquery onclick函数覆盖引导表条带行 [英] Overriding bootstrap table-striped rows with jquery onclick function
问题描述
大家好。
我使用了bootstrap 4表类来构建图像中显示的表格，其中包括表格条纹类，它为表格提供了交替行bg颜色。然后我使用jquery函数为高亮显示的行提供深蓝色的bg-color。除了从jquery函数获得的bg颜色不会覆盖表中的备用（灰色）行之外，它只能用于白色的彩色的行。有没有办法做到这一点？即使功能覆盖灰色行和白色行的颜色？我不想停止使用bootstrap表格分类。下面是我使用的jquery函数：
$（'tbody tr'）。click（function（）{
var selected = $（this）.hasClass（highlight）;
$（tbody tr）。removeClass（highlight）;
if（！selected）
$（this）.addClass（highlight）;
}）;
链接到自举文件后使用链接CSS。例如：
< head>
...
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity =sha384 -BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous>
...
< link rel =stylesheettype =text / csshref =mytheme.css>
< / head>
请注意，您可以将任何查询字符串添加到您的CSS文件网址以避免发生问题： p>
< link rel =stylesheethref =mytheme.css？version = new>
您也可以使用！important 规则您的CSS作为最后的手段。
.highlight {background-color：red ！important;}
< link rel =stylesheet href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cssintegrity =sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTsz / K68vbdEjh4ucrossorigin =anonymous>< div class = 表响应> < table class =table table-bordered table-striped> < COLGROUP> < col class =col-xs-1> < col class =col-xs-7> < / COLGROUP> < THEAD> < TR> <的第i;类< /第> <的第i;说明与LT; /第> < / TR> < / THEAD> < TBODY> < TR> < th scope =row>文字< / th> < TD>文字< / TD> < / TR> < TR> < th scope =row>文字< / th> < TD>文字< / TD> < / TR> < tr class =highlight> < th scope =row>文字< / th> < td> highlited row< / td> < / TR> < TR> < th scope =row>文字< / th> < TD>文字< / TD> < / TR> < TR> < th scope =row>文字< / th> < TD>文字< / TD> < / TR> < / tbody的> < / table>< / div>
hello everyone. I've used bootstrap 4 table classes to build the table shown in the image, including the table-striped class which gives the table it's alternate row bg-colors. I've then used a jquery function to give the highlighted row it's deep blue bg-color.
everything works as expected, except that the bg-color gotten from the jquery function, does not override the alternate (gray colored) rows of the table, it only works on the white colored rows. Is there a way to make this work? i.e make the function override the color of the gray colored rows as well as the white ones? I don't want to have to stop using the bootstrap table-striped class.
below is the jquery function I'm using:
$('tbody tr').click(function(){
var selected = $(this).hasClass("highlight");
$("tbody tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});
Use link to your CSS file after link to the bootstrap CSS. For example:
<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>
Note, you could add any query string to your CSS-file URL to avoid сaching problem:
<link rel="stylesheet" href="mytheme.css?version=new">
Also you can use !important rules in your CSS as a last resort.
.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>
这篇关于用jquery onclick函数覆盖引导表条带行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
