j查询数据表突出显示单行

jQuery datatable highlight single row

本文关键字：显示 单行 查询 数据表      更新时间：2023-09-26

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

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

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

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

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

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

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

相关文章：