Octavian Epure Octavian Epure - 1 month ago 30
Javascript Question

datatables selected row background color

I'm a newbie so bare with me; I'm using jQuery datatables plugin and I need to select a row and change the color of the selcted row. I followed this example from datatables but it doesn't work for me.

This is how i initialize the table:

var oTable = $("#rolesTable").dataTable({
// "bJQueryUI": true,
"iDisplayLength": 25,
"aoColumns": [
null,
{"sType": "role"},
null,
null
],
"aaSorting": [[1, "desc"], [0, "asc"]]
});


and this is the code for the click event and the CSS class:

<style>
.row_selected tr {
background-color: black;
}
</style>




$("#rolesTable tbody tr").click(function (event) {
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});


Sorry, I added the click handler

Answer

It's because class row_selected is added to <tr> element, so your selector doesn't match anything.

Moreover, background-color is added to <td> elements (your custom color is 'under' default selected color).

Try :

.row_selected td {
    background-color: black !important; /* Add !important to make sure override datables base styles */
 }
Comments