Jquery dataTable change row color

Try this CSS:

table.display tbody tr:nth-child(even):hover td{
    background-color: red !important;
}

table.display tbody tr:nth-child(odd):hover td {
    background-color: blue !important;
}

UPDATED jsFIDDLE DEMO


One of the JS snippets I write at the start of each project is to add some basic formatting to tables. Include this inside your $(function() { ... }); block

    $('table tr').mouseover(function() {
        $(this).addClass('row_selected');
    });
    $('table tr').mouseout(function() {
        $(this).removeClass('row_selected');
    });

Similarly, this bit will take away the hassle of adding odd/even markup to every row in the table, as your are building it

$('table').each(function() { $(this).find('tr:even').addClass('even'); });
$('table').each(function() { $(this).find('tr:odd').addClass('odd'); });