javascript - jQuery 数据表高亮单行

Question

我试图突出显示我的 jQuery 数据表中的一行。

我尝试使用此处的信息:https://datatables.net/examples/api/select_single_row.html

使用它，我可以使用 Chrome 的检查器，并且可以验证该类是否已添加到表格行中。但该行未突出显示。

这是 jQuery:

 // not sure if this was necessary to show
 $('#example1').DataTable({
   "iDisplayLength": 25,
   "order": [[ 6, "desc" ]],
   "scrollY": 550,
   "scrollX": true,
   "bDestroy": true,
   "stateSave": true
 });

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

如此一来，如前所述，我可以看到类被添加到行中，只是没有看到行颜色发生变化。

我在 HTML 页面上添加了一些 CSS 以查看它是否有效。如下:

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

没有用。有人看到我的错误吗？

Answer 1

我无法对此进行测试，但错误似乎出在您为 background-color 使用的 CSS 选择器中。

它应该是 tr.selected(具有 selected 类的 tr 元素)而不是 .selected tr(具有 .selected 类的元素中的 tr 元素)。