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（tr个元素selected}而不是.selected tr（元素tr元素{ {1}}）。

Answer 2

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

Answer 3

也许你可以使用jQuery click函数和一个小的JS逻辑轨道

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

jQuery数据表突出显示单行

3 个答案: