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