2013-08-16 102 views
0

我已經在某個表上實施了數據表,其中某些行應具有與其他行不同的背景色,由CSS類標識。動態更改所有行的數據表背景顏色

我想改變行的背景顏色,只要指針懸停在它上面。爲此,我使用下面的代碼。

$(document).ready(function() { 
    oTable = $('#mytable').dataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers", 
     "fnRowCallback": function() { 
      // Assigning colors to 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 to change color and 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); 
     }); 
    }); 
}); 

第一次加載時,表格給出了所需的結果。但是,當我對任何列進行排序時,一切都會崩潰。某些欄正確顯示背景顏色,有些欄只顯示一部分。如何在不讓排序類影響它的情況下更改背景顏色?

回答

1

你的代碼只作用於風格。你應該使用CSS來做到這一點。

有一種特殊的:hover選擇在CSS允許你改變風格,當鼠標點在一個元素:

#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 
} 

而放棄你的fnRowCallback.hover()回調兩者。

Fiddle

+0

在排序完成後,Datatable會應用一些自己的CSS。所以只使用CSS將不起作用。數據表完成後,我將不得不動態更改CSS。 – ishan