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?

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?

• javascript
• jquery
• css
• datatables

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

2 Answers 2

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

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