jQuery datatable highlight single row

Question

I am trying to highlight a single row in my jQuery datatable.

I attempted to use the information here: https://datatables.net/examples/api/select_single_row.html

Using that, I can use Chrome's inspector and I can verify that the class is being added to the table row. But the row is not being highlighted.

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

With this, as stated, I can see the class being added to the row, I'm just not seeing the row color change.

I added some CSS on the HTML page to see if it would work. As follows:

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

To no avail. Does anyone see my error?

Answer 1

I cannot test this, but the error seems to be in the CSS selector you're using for the background-color.

It should be tr.selected (a tr element with the class selected) and not .selected tr (a tr element in an element with the class .selected).