Jquery dataTable更改行颜色

Question

我正在使用JQuery数据表，
我需要更改鼠标上的行的颜色事件（highligthed行）
我试过了：

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

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

的jsfiddle

Answer 1

试试这个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演示

Answer 2

我在每个项目开始时编写的一个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'); });

Answer 3

这个？

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

Answer 4

试试这个

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

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

Answer 5

你可以干脆做

小提琴

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

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

Answer 6

如果您希望整行改变颜色，您可以这样做

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

你能试试吗？ 在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'); 
    });    
} );

如果不是必需的，请在第一个td中删除它sort_1类名。 或者可以覆盖css。

Answer 8

如果使用javascript设置样式，我会遇到表css被覆盖的问题，在使用jQuery工作的表的初始化中使用createdRow回调：

var table = $('#myTable').DataTable({...

  createdRow: function( row, data, dataIndex ) {
    if (dataIndex%2 == 0) {
      $(row).attr('style', 'background-color: red;');
    } else {
      $(row).attr('style', 'background-color: blue;');  
    }
  }

});

查看Datatable createdRow的文档