Jquery dataTable改变行颜色

Posted 2023-05-07

【中文标题】Jquery dataTable改变行颜色

【英文标题】：Jquery dataTable change row color

【发布时间】：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)

【参考方案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