我正在使用Twitter Bootstrap表与可点击的行突出显示,当悬停在(我可以摆脱悬停的功能,如果它使这更容易).我希望所选行保持高亮显示,直到另一行被单击或被重新标记为止.
$( document ).ready(function() {
$('#myTable').on('click','tbody tr',function(event) {
// console.log("test ");
});
和桌子
<table class="table table-bordered table-hover" id="myTable">
<tbody>
<tr>
<tr class='clickable-row'>
我在JS中尝试过这个代码,但没有起作用
$(this).addClass('highlight').siblings().removeClass('highlight');
解决方法
你很近定位您的$(“#myTable”).on(…)事件上的.clickable-row类,并使用Bootstrap的.active类可以为您工作：
HTML：
<table class="table table-bordered" id="myTable">
<tr class="clickable-row">
<th>Example</th>
</tr>
<tr class="clickable-row">
<th>Example 2</th>
</tr>
</table>
使用Javascript：
$('#myTable').on('click','.clickable-row',function(event) {
$(this).addClass('active').siblings().removeClass('active');
});
注意：如果你在桌子上离开了.table-hover,你必须使用不同于.active的类,例如.bg-info(这将是一个blue hightlight)
要从行中删除突出显示(即再次单击),请检查该行是否具有该类并将其删除：
$('#myTable').on('click',function(event) {
if($(this).hasClass('active')){
$(this).removeClass('active');
} else {
$(this).addClass('active').siblings().removeClass('active');
}
});
参见@ BravoZulu的原始信息的答案.
