Jquery thay đổi màu DataTable hàng

Question

Tôi đang sử dụng JQuery DataTable,
tôi cần phải thay đổi màu sắc của hàng trên chuột qua sự kiện (hàng highligthed)
tôi đã cố gắng:

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

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

JSFiddle

Answer 1

Hãy thử điều này 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

Hãy thử điều này

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

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

Answer 3

Bạn chỉ có thể làm

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 4

Nếu bạn muốn toàn bộ hàng để thay đổi màu sắc bạn có thể làm điều này

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

Bạn có thể thử không? Trong CSS, td chỉ thay đổi màu. Điều này sẽ được thay đổi màu sắc hàng

somthing như thế này

$(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'); 
    });  
}); 

Nếu nó không phải là bắt buộc, loại bỏ nó sorting_1 tên lớp trong td đầu tiên. hoặc có thể ghi đè lên css.

Answer 6

Một trong những đoạn mã JS tôi viết ở đầu mỗi dự án là thêm một số định dạng cơ bản vào bảng. Bao gồm điều này bên trong $ (function() {...}); khối

$('table tr').mouseover(function() { 
     $(this).addClass('row_selected'); 
    }); 
    $('table tr').mouseout(function() { 
     $(this).removeClass('row_selected'); 
    }); 

Tương tự, bit này sẽ lấy đi những rắc rối của việc thêm chẵn/lẻ đánh dấu để mỗi hàng trong bảng, như bạn đang xây dựng nó

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

Answer 7

này?

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