HoodCoderMan HoodCoderMan - 5 months ago 28
jQuery Question

jquery datatable highlight single row

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? Please help.

Thank you in advance.

Answer

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).