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);
         });
     });
 });

在第一次加载时，该表给出了所需的结果。但是，当我对任何列进行排序时，一切都会崩溃。有些列正确显示背景颜色，有些仅部分显示。如何更改背景颜色而不让排序类影响它？

4

1 回答 1

1

您的代码仅对样式起作用。你应该使用CSS来做到这一点。

CSS 中有一个特殊的:hover选择器，允许您在鼠标指向元素时更改样式：

#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()回调。

小提琴

于 2013-08-16T07:46:36.227 回答