JQuery dataTable change row color

Question

I am using jquery datatable,
I need to change the color of a row on a mouse above an event (highligted row)
I tried:

table.display tr.even.row_selected td { background-color: red; } table.display tr.odd.row_selected td { background-color: blue; } 

Jsfiddle

Answer 1

Try 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

Answer 2

One of the JS fragments that I write at the beginning of each project is to add some basic formatting to the 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 remove the hassle of adding odd / even markup for each row in the table since you are creating it

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

Answer 3

It?

 table.display tbody .odd:hover { background-color: red !important; } table.display tbody .even:hover { background-color: blue !important; } 

Answer 4

try it

 table.display tr.even td:hover{ background-color: red; } table.display tr.odd td:hover{ background-color: blue; } 

Answer 5

You can just do

Fiddle

 #example tr td { height: 50px; } table.display tr.even td:hover { background-color: red; } table.display tr.odd td:hover { background-color: blue; } 

Answer 6

If you want the whole line to change color, you can do this

 #example tr td { height: 50px; } table#example tr.even:hover td { background-color: red; } table#example tr.odd:hover td { background-color: blue; } 

http://jsfiddle.net/leighking2/t2g9yft6/

Answer 7

You can try? In CSS, td only color changes. This will change the color of the string.

Something like that

 $(document).ready(function() { $('#example').dataTable(); $('table.display tr.even').hover(function(){ $(this).css('background-color','#f00'); }); $('table.display tr.even').mouseout(function(){ $(this).css('background-color','#f9f9f9'); }); } ); 

If this is not necessary, delete its name sorting_1 in the first td. or can overwrite css.

Answer 8

I had a problem rewriting the css table if setting styles using javascript using createRow callback while initializing the table using jQuery worked:

 var table = $('#myTable').DataTable({... createdRow: function( row, data, dataIndex ) { if (dataIndex%2 == 0) { $(row).attr('style', 'background-color: red;'); } else { $(row).attr('style', 'background-color: blue;'); } } }); 

see docs for Datatable madeRow