javascript - jQuery DataTables row highlighting - Stack Overflow

admin管理员组

文章数量:1401307

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

Share Improve this question Follow edited Aug 15, 2018 at 11:03 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jul 12, 2016 at 14:39 John BeasleyJohn Beasley 3,0891111 gold badges5353 silver badges103103 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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');
});

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

本文标签： javascriptjQuery DataTables row highlightingStack Overflow