Datatable Row Select

Illustrating issue with row select when background color changed

by CloudTables

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<style>
table.dataTable tbody tr.selected td {
    /*    background-color: #B0BED9 !important;*/
    background-color: #255 !important;
    color: white;
}
</style>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
                <th>Col5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>some data</td>
                <td>HVZ</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>HVS</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>AAA</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
                <td>HVO</td>
                <td>some data</td>
                <td>some data</td>
                <td>some data</td>
            </tr>
            <tr>
                <td>some data</td>
               ...

CSS

td.orange {
    background-color: orange;
}
td.pink {
    background-color: pink;
}
td.yellow {
    background-color: yellow;
}

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable( {
    		"rowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        if ( aData[1].startsWith("H")) {
          if ( aData[1].endsWith("VS")) {
            $('td', nRow).eq(1).addClass('orange');
          }
          else if ( aData[1].endsWith("O")) {
            $('td', nRow).eq(1).addClass('yellow');
          }
          else {
            $('td', nRow).eq(1).addClass('pink');
          }
        }
      },
        dom: 'Bfrtip',
        select: true,
        buttons: [
            {
                text: 'Select all',
                action: function () {
                    table.rows().select();
                }
            },
            {
                text: 'Select none',
                action: function () {
                    table.rows().deselect();
                }
            }
        ]
    } );
} );