突出显示 bootstrap table 中的行

Question

我正在使用 bootstrap-table，那是我的笔：codepen

我需要突出显示与我在第一个 table 中选择的 ID 相同的行（在第二个和第三个 table 中）。

我怎样才能select/deselect他们？我想我必须将 selected class 添加到行中？我试过这样做，但不幸的是它似乎没有用。

这是我尝试过的：

if ($('tr[class="selected"]')) {
   var temp = $('tr[class="selected"]').attr("data-index");
   $('tr[data-index="' + temp + '"]').addClass('selected');
}

此外，为什么 table 中有升序？如何保留 json 个对象的原始序列？

Answer 1

使用以下脚本更新您的侦听器：

$('#eventsTable').on('check.bs.table', function (e, row, element) {

     var id = Number(element.attr('data-index')) + 1;
     $('#eventsTable2 tr:eq('+id+')').addClass('selected');
     $('#eventsTable3 tr:eq('+id+')').addClass('selected');
});

$('#eventsTable').on('uncheck.bs.table', function (e, row, element) {  

     var id = Number(element.attr('data-index')) + 1;     
     $('#eventsTable2 tr:eq('+id+')').removeClass('selected');
     $('#eventsTable3 tr:eq('+id+')').removeClass('selected');
});

突出显示 bootstrap table 中的行

Highlighting rows in bootstrap table

html

javascript

jquery

twitter-bootstrap

bootstrap-table