Jquery dataTable change row color

问题

I am using JQuery datatable,
I need to change the color of the row on the mouse over event (the highligthed row)
I tried:

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

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

JSFiddle

回答1:

Try this 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

回答2:

One of the JS snippets I write at the start of each project is to add some basic formatting to tables. Include this inside your $(function() { ... }); block

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

Similarly, this bit will take away the hassle of adding odd/even markup to every row in the table, as your are building it

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

回答3:

This?

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

回答4:

Try this

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

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

回答5:

You can simply do

FIDDLE

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

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

回答6:

If you want the whole row to change colour you can do this

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

回答7:

Can you try it? In CSS, td only changing color. This will be changing row color

Somthing like this

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

If it is not mandatory, remove it sorting_1 class name in first td. or can overwrite the css.

回答8:

I was having an issue with the table css being overwritten if setting the styles with javascript, using the createdRow callback in the initialization of the table with jQuery worked:

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

});

see the docs for Datatable createdRow

来源：https://stackoverflow.com/questions/25742133/jquery-datatable-change-row-color

标签

javascript

css

jquery-datatables