HoodCoderMan HoodCoderMan - 4 months ago 11
jQuery Question

JQUERY DATATABLES row highlighting

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.

I hope this makes sense.

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?

Answer

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