How change colour of selected rows having background image?

klippdassie

Thanks for a great plug-in, and sorry for not being able to provide a test case, but hopefully this will be fairly clear:

I have a DataTable in which users can both select specific rows, and click on plus/minus signs (i.e. background png images) in any such row to show/hide child rows. I have previously changed the colour of selected rows using their background-color attribute, but had to switch to using box-shadow when I updated to version 1.12 of DataTables:

.table tr.selected td {
    color: black !important;
    box-shadow: inset 0 0 0 9999px #bed9e5 !important;
}

This works fine in terms of changing the colour, but unlike the previous solution, it also makes my plus/minus images disappear when rows are selected. They are styled like this:

td.details-control {
    background: url('../img/details_open.png') no-repeat top 13px right 10px !important;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../img/details_close.png') no-repeat top 13px right 10px !important;
}

Any ideas on how I can I change the colour of selected rows while keeping my plus/minus signs visible?
Thanks!

rf1234

I had something similar and used z-index like this:

//make sure the modal does not slip to the background!!
$('#id').css('z-index', 9900);

I had to execute this using a timeout of 200 by the way.

Something like this might work:

table
   .on ( 'select', function () {
       setTimeout(function() {
           $('#id').css('z-index', 9900);
       }, 200)
   })

klippdassie

Thanks rf1234 will try this!