jQuery数据表突出显示单行答案

【问题标题】：jQuery datatable highlight single rowjQuery数据表突出显示单行
【发布时间】：2016-07-07 16:21:39
【问题描述】：

我正在尝试突出显示我的 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>

无济于事。有人看到我的错误吗？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

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

它应该是tr.selected（tr 元素，类selected）而不是.selected tr（tr 元素，类.selected）。

【讨论】：

等待 - 它确实有效。我不得不从表中删除类 table-hover 和 table-striped 。但我得到了要突出显示的行。

【解决方案2】：

确保您正在加载jquery.dataTables.min.css。

【讨论】：

看来我不是。让我补充一下，看看会发生什么。
我已经加载了 datatables.min.css。不确定这是否会有所不同。

【解决方案3】：

也许你可以使用 jQuery click 函数和一点 JS 逻辑轨迹

https://jsfiddle.net/moongod101/mbLnrcg6/

【讨论】：