一部の行が他の行とは異なる背景色を持ち、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);
});
});
});
最初のロードで、テーブルは目的の結果を示します。ただし、列を並べ替えると、すべてがバラバラになります。背景色が正しく表示される列もあれば、部分的にしか表示されない列もあります。並べ替えクラスに影響を与えずに背景色を変更するにはどうすればよいですか?