我这里有桌子的例子
我想从单击行的行中删除突出显示。
当我将鼠标悬停在该行上时,背景为灰色。我希望能够删除行单击上的灰色背景,以便在没有设置背景的情况下保持行的状态。
这可能吗?
我已经完成了选择要单击的单元格和行的功能:
var test = function(element){
var tdCaller = $(element);
var parentRow = tdCaller.parent();
var parentBody = parentRow.parent();
}
但是我不知道如何在点击时从该行中删除突出显示?
我试图尽量减少对您的代码的更改:
HTML(TR新增类别):
<table id="tblBAENWC" class="table table-stripped table-bordered table-hover table-condensed col-sm-12">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="mytr">
<td style="cursor:pointer;" onclick="test(this);">1</td>
<td style="cursor:pointer;" onclick="test(this);">First name</td>
</tr>
<tr class="mytr">
<td style="cursor:pointer;" onclick="test(this);">1</td>
<td style="cursor:pointer;" onclick="test(this);">First name</td>
</tr>
<tr class="mytr">
<td style="cursor:pointer;" onclick="test(this);">1</td>
<td style="cursor:pointer;" onclick="test(this);">First name</td>
</tr>
<tr class="mytr">
<td style="cursor:pointer;" onclick="test(this);">1</td>
<td style="cursor:pointer;" onclick="test(this);">First name</td>
</tr>
</tbody>
</table>
Javascript(关注注释“我的添加”):
var test = function(element) {
var tdCaller = $(element);
var parentRow = tdCaller.parent();
var parentBody = parentRow.parent();
// my add
$('tr.mytr.clicked').removeClass('clicked')
parentRow.addClass('clicked');
}
CSS(查看注释“我的添加”):
.MarkSelectedRow {
background-color: cornflowerblue;
}
/* my add */
.table-hover tbody tr.mytr.clicked {
background-color: white;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句