CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapbootstrap-table
V.Pud
V.Pud

Reputation: 53

Highlighting rows in bootstrap table

I am using bootstrap-table and that's my pen: codepen

I need to highlight rows (in 2nd and 3rd table) with the same ID I have selected in the 1st table.

How can I select/deselect them? I guess I have to add the selected class to the rows? I have tried to do that but it doesn't seems to work unfortunately.

Here is what I have tried:

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

Furthermore, why is there ascending ordering in the tables? How can I keep the original sequence of json objects?

Upvotes: 3

Views: 3425

Answers (1)

R.Costa
R.Costa

Reputation: 1393

Update your listeners with the following scripts :

$('#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');
});

Upvotes: 1

Related Questions