jQuery DataTables 行高亮显示

Question

使用 jQuery DataTables，我使用下面的代码来突出显示选定的行：

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

我还在页面顶部有这个页内 CSS 类：

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

以上所有工作都相应地起作用。 我可以单击行上的任意位置，该行将突出显示。

但是，我遇到了一个问题。 在每一行中，都有用户可以单击以打开模态窗口的链接。 如果用户直接单击链接，则模式会打开并且该行确实突出显示。

如果用户首先单击该行，然后在同一行中单击链接以打开窗口，则会出现问题……现在该行不再突出显示。

我需要做的是无论他们单击同一行多少次都保持该行的突出显示 - 直到他们单击不同的行。

我如何调整上面的 jQuery 来实现这一点？

Answer 1

您可能要取消突出显示所有行，然后突出显示当前行：

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

Answer 2

您可能希望取消突出显示所选行，然后突出显示当前行：

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