JQuery dataTable изменение цвета строки

Я использую jQuery datatable,
Мне нужно изменить цвет строки на мыши над событием (строка highligthed)
Я попробовал:

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

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

JSFiddle

7
css javascript jquery-datatables

7 ответов

попробуй такое 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;
}

обновлено jsfiddle DEMO

11

один из фрагментов JS, которые я пишу в начале каждого проекта, - это добавление базового форматирования в таблицы. Включите это в свой $(function () {... }); блок

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

аналогично, этот бит отнимет хлопоты добавления нечетной / четной разметки к каждой строке в таблице, так как вы строите ее

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

этот?

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

попробуй такое

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

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

вы можете просто сделать

скрипка

#example tr td {
    height: 50px;
}
table.display tr.even td:hover {
    background-color: red;
}

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

Если вы хотите, чтобы вся строка меняла цвет, вы можете сделать это 

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

0

можно попробовать? В CSS td меняет только цвет. Это будет изменение цвета строки

что-то вроде этого

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

Если это не обязательно, удалите его имя класса sorting_1 в первом td. или может перезаписать css.

0