jQuery DataTables row highlighting

Question

Using jQuery DataTables, I am using the below code to highlight a selected row:

 var table = $('#example1').DataTable();        
 $('#example1 tbody').on('click', 'tr', function()
 {
   if($(this).hasClass('selected')){
     $(this).removeClass('selected');
   }
   else{
     table.$('tr.selected').removeClass('selected');
     $(this).addClass('selected');
   }
 });

I also have this in-page CSS class at the top of the page:

 <style>
   tr.selected {background-color: #a6a6a6;}
 </style>

All of the above works accordingly. I can click anywhere on the row, and the row will be highlighted.

However, I have encountered a problem. In each row, there are links that the user can click on to open a modal window. If the user clicks directly on the link, the modal opens and the row is indeed highlighted.

The problem occurs if the user clicks the row first, then within the same row, clicks the link to open the window...now the row is no longer highlighted.

What I need to do is keep the highlight on the row no matter how many times they click the same row - until they click a different row.

How can I adjust the jQuery above to make this happen?

Sounds like (and I'm no expert on JQ) that you need event.stopPropagation(); on your link JS/JQ — Paulie_D
– Paulie_D, Commented Jul 12, 2016 at 14:47

Wikiti · Accepted Answer · 2016-07-12 14:51:52Z

6

You may want to un-highlight all of the rows, then hightlight the current row:

$('#example1 tbody').on('click', 'tr', function() {
  $('#example1 tbody > tr').removeClass('selected');
  $(this).addClass('selected');
});

answered Jul 12, 2016 at 14:51

Wikiti

1,63613 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Beasley Over a year ago

Yessir - this is exactly what I was looking for. I removed all of my javascript and replaced it with your code.

Jar Yit · Accepted Answer · 2022-01-07 03:57:48Z

0

You may want to un-highlight the selected row, and then hightlight the current row:

   /*DataTables highlight selected row*/
    $('#dataTable tbody').on('click', 'tr', function() {
        $('#dataTable tbody > tr').removeClass('row_selected');
        $(this).addClass('row_selected');
    });

answered Jan 7, 2022 at 3:57

Jar Yit

1,00513 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery DataTables row highlighting

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related