jquery – 选择表行,并使用Twitter Bootstrap保持突出显示

我正在使用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');
});

和一个Bootply Example

注意：如果你在桌子上离开了.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的原始信息的答案.