Color extra info child rows

Tripple Delta

Link to test case: https://www.datatables.net/examples/api/row_details.html

When clicking on the arrow extra info is shown. But the background color is always white. Is there a way to change that color?

rf1234

I would just wrap this in a div-tag and add the style for the background color to that div.
Maybe something like this could work (haven't tested it):

// Formatting function for row details - modify as you need
function format(d) {
    // `d` is the original data object for the row
    return (
       '<div style="background-color:lightblue"> +
        '<dl>' +
        '<dt>Full name:</dt>' +
        '<dd>' +
        d.name +
        '</dd>' +
        '<dt>Extension number:</dt>' +
        '<dd>' +
        d.extn +
        '</dd>' +
        '<dt>Extra info:</dt>' +
        '<dd>And any further details here (images etc)...</dd>' +
        '</dl>' + 
        '</div>
    );
}

kthorngren

@rf1234 has a good and simple answer. Another option is to use use CSS. If you inspect the parent row you will see the class dt-hasChild is applied when the child is shown. You can use a CSS like this:

tr.dt-hasChild + tr {
  background-color: green!important;
}

https://live.datatables.net/nubiworo/1/edit

Two options to choose from

Kevin

Tripple Delta

Thanks a lot. But I had to change it like this to keep it alternating.

tr.odd.dt-hasChild + tr {
    background-color: green !important;
}