DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

How change colour of selected rows having background image?

How change colour of selected rows having background image?

klippdassieklippdassie Posts: 6Questions: 1Answers: 0
in Free community support

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!

Answers

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    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)
   })
  • klippdassieklippdassie Posts: 6Questions: 1Answers: 0

    Thanks rf1234 :) will try this!

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.