jquery - Dynamically change datatables background color for all rows -

i have implemented datatables on table in rows should have different background color others, identified css class.

i want change background color of row whenever pointer hovered on it. using following code.

$(document).ready(function () {      otable = $('#mytable').datatable({          "bjqueryui": true,          "spaginationtype": "full_numbers",          "fnrowcallback": function () {              // assigning colors inactive rows              $('tr').each(function () {                  if ($(this).hasclass('inactive')) {                      $(this).css('background', '#fccfcf');                      $(this).find('.sorting_1').each(function () {                          $(this).css('background', '#fccfcf');                      });                  }              });          },          "aocolumns": /*3 column table*/          [{              "bsearchable": false,              "bsortable": false          },          null, null]      });       // dynamically binding hover function change color , pointer on mouse hover       otable.$('tr').hover(function () {          previousbackground = $(this).css('background-color');          $(this).css('background-color', '#e2ebff');          $(this).find('.sorting_1').each(function () {              $(this).css('background', '#e2ebff');          });          $(this).css('cursor', 'pointer');      }, function () {          $(this).css('background-color', previousbackground);          $(this).find('.sorting_1').each(function () {              $(this).css('background', previousbackground);          });      });  }); 

on first load, table gives desired result. when sort column, falls apart. columns display background colors properly, display partially. how can change background colors without letting sorting classes affect it?

your code acts on style. should use css that.

there special :hover selector in css allow change style when mouse points on element:

#mytable tbody tr.inactive, #mytable tbody tr.inactive td.sorting_1 {     background-color: #fccfcf } #mytable tbody tr:hover, #mytable tbody tr:hover td.sorting_1 {     background-color: #e2ebff;     cursor: pointer } 

and drop both fnrowcallback , .hover() callbacks.

fiddle