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的文檔