选择表格行并使用 Twitter Bootstrap 保持突出显示答案

【问题标题】：Select table row and keep highlighted using Twitter Bootstrap选择表格行并使用 Twitter Bootstrap 保持突出显示
【发布时间】：2015-10-22 04:47:39
【问题描述】：

我正在使用带有可点击行的 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');

【问题讨论】：

标签： jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你很接近。在您的 $("#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', '.clickable-row', function(event) {
  if($(this).hasClass('active')){
    $(this).removeClass('active'); 
  } else {
    $(this).addClass('active').siblings().removeClass('active');
  }
});

有关原始信息，请参阅@BravoZulu 的答案。

【讨论】：

重新单击该行不会取消选择它。
此解决方案存在一个错误 - 您可以选择多个行（准确地说，每页一个）。使用table.$('tr.active').removeClass('active'); 似乎可以解决问题。

【解决方案2】：

试试：

$(".clickable-row").click(function(){
    if($(this).hasClass("highlight"))
        $(this).removeClass('highlight');
    else
        $(this).addClass('highlight').siblings().removeClass('highlight');
})

【讨论】：

这就是 toggleClass 派上用场的地方。

【解决方案3】：

要显示一种颜色的绘制行，表示被选中，可以使用data-row-style = 'formatterRowUtSelect'

在你的代码中，你可以添加这个方法：

formatterRowUtSelect = function (row, index) {
    if (row.fieldOfMyObject == $ ('#fieldOfMyObject'). val ())
        return {classes: 'row-selected'};
    return {};
}

不要忘记为所选行创建 css：

.row-selected {
    background-color: #a9f0ff !important;
    font-weight: bold;
}

我希望它对你有用，你好。

【讨论】：

欢迎来到 Stack Overflow！如果您还没有，请随时查看how to ask 和what's on-topic here。
另外，我会注意到，使用函数声明（即function foo() { ... }）而不是隐式全局赋值（如foo = function () { ... }）通常更惯用。这样做的另一个好处是it also works in strict mode.

【解决方案4】：

我在 bootstrap-table 上使用过这个脚本。

$('#tb-pegawai').on('change', 'tr' , function (event) {
            if($('.selected')){ // } })

【讨论】：