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