Select Plugin - override JS CSS styling, Selected cell/row not visible

patrickmau

I have a Datatables table + Select plugin. The background color of the cells is set automatically based on the content via JS, which overrides the CSS of the Select plugin, leaving the selected cell invisible / not highlighted in the Select CSS color.

How can I get the Select CSS highlight color to be applied ON TOP or INSTEAD of my JS CSS?

<script type="text/javascript">
$(document).ready(function() {

    var cells = document.getElementById("med_forecast").getElementsByTagName("td");
    for (var i = 0; i < cells.length; i++) {
        if (cells[i].innerHTML > 90) {
            cells[i].style.backgroundColor = "#c6efce";
        }
        if (cells[i].innerHTML < 90) {
                cells[i].style.backgroundColor = "#ffc7ce";
        }
        if (cells[i].innerHTML == "-") {
                cells[i].style.backgroundColor = "#ffeb9c";
        }
    }

    $('#med_forecast').DataTable( {
        select: {
            style: 'os',
            items: 'cell'
        },
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
        ],
        "scrollX": true,
        "autowidth": false,
        "pagingType": "full_numbers",
        "pageLength": 31,
        "lengthChange": false,
        "searching": false,
        "ordering": false,
        "info": true
    } );

} );
</script>

Thank you,
Patrick

allan

cells[i].style.backgroundColor = "#c6efce";

Don't do this - that's almost(*) always going to beat out styles from a stylesheet due to the priority order of CSS. I'd suggest you add a class based on your conditions and then use CSS matching those classes to apply the background colours needed.

.* Rules with `!important will actually overrule the Javascript set style.

Allan

patrickmau

Appreciate that, but I dont exactly have any other way of doing it.
The table I have is static html with 100 cols and 50 rows and fixed figures in each cell. Even if I apply a class to each cell, I still would have to write JS code that changes the cell background color if the class == xyz && value > N, so essentially would put me in the same situation of having JS change background colors as opposed to DT Select.

Is there any priority sequence I can utilize to make sure the DT Select styling overrides other CSS?

allan

You could try adding this to your CSS:

table.dataTable tbody > tr.selected td {
  background-color: #B0BED9 !important;
}

Of course that will override your background colour added by the JS though! You are effectively using the same style for two data points, only one can win. Perhaps you could use a border colour rather than background colour for your custom highlighting?

Allan