Jquery dataTable改变行颜色答案

【问题标题】：Jquery dataTable change row colorJquery dataTable改变行颜色
【发布时间】：2014-11-02 17:28:06
【问题描述】：

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

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

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

JSFiddle

【问题讨论】：

它在悬停时改变颜色。你想做什么？
您的页面上不存在“row_selected”类。您需要更多的 JS 将类添加到选定的行（假设您是通过 onclick 执行此操作），然后您的 css 应该可以工作。
提示：不要使用 .even 或 .odd，而是使用 css tr:nth-child(odd) 或 tr:nth-child(even)

标签： javascript css jquery-datatables

【解决方案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

【讨论】：

是的，这是最可接受的方法，尽管它会使 .odd、.even 类无用，但无论如何我评论他使用 nth-child 而不是制作此类。

【解决方案2】：

我在每个项目开始时编写的 JS sn-ps 之一是为表格添加一些基本格式。将此包含在您的 $(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'); });

【讨论】：

【解决方案3】：

这个？

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

【讨论】：

【解决方案4】：

试试这个

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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/

【讨论】：

因为 jquery.datatable.css 中的 css 更具体地针对 td。有问题。通过在我的示例中使用 id，这使其成为最具体的选择器，因此应用了样式。您可以随时使用 !important 否决任何规则，而不必担心您的具体程度，但我会尽量避免这条路线，因为它可能会在以后咬住您。这是一篇很好的文章，解释了如何确定将应用哪种样式webdesign.about.com/od/advancedcss/a/aa062706.htm

【解决方案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。

【讨论】：

【解决方案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;');  
    }
  }

});

查看 docs 获取 Datatable createdRow

【讨论】：