Octavian Epure Octavian Epure - 9 months ago 106
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": [
{"sType": "role"},
"aaSorting": [[1, "desc"], [0, "asc"]]

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

.row_selected tr {
background-color: black;

$("#rolesTable tbody tr").click(function (event) {
$(oTable.fnSettings().aoData).each(function () {

Sorry, I added the click handler

Answer Source

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 */