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

<强> UPDATED jsFIDDLE DEMO

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

你可以简单地做

<强> 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 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设置样式，使用jQuery初始化表时使用createdRow回调，我会遇到表css被覆盖的问题：

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

});

有关数据表createdRow的信息，请参见docs

Jquery dataTable更改行颜色

8 个答案: