如何根据jQuery数据表中的列值设置表行的颜色

Posted 2023-05-07

【中文标题】如何根据jQuery数据表中的列值设置表行的颜色

【英文标题】：How to set color for table rows based on column value in jQuery data table

【发布时间】：2013-04-27 12:50:28

【问题描述】：

我正在使用 jQuery 数据表。我有如下数据

Column1 Column2 Column3
-----------------------
 AAA    BBB     CCC
 AAA    GGG     YYY
 BBB    ooo     LLL

现在在第一列的前 2 行我有相同的值AAA。我想给那些应用一些颜色 行。然后第三行的另一种颜色。像这样我有 30 条记录。是否可以这样做。如果可能的话，我该怎么做。我正在使用 jQuery 数据表。提前致谢..

【参考方案1】：

使用fnRowCallback（或更新的rowCallback）来实现这一点

$('#example').dataTable(
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) 
        switch(aData[0])
            case 'AAAA':
                $(nRow).css('color', 'red')
                break;
            case 'BBBB':
                $(nRow).css('color', 'green')
                break;
            case 'CCCC':
                $(nRow).css('color', 'blue')
                break;
        
    
);

演示：Fiddle

【讨论】：

@PSR 无论如何都应该有一些业务逻辑来说明要为值应用什么颜色

感谢@ArunPJohny，但我认为return nRow 在此回调函数中是必需的，否则，数据表会引发异常，例如“fnRowCallBack 未返回节点”

请考虑根据@Herve MARTIN 的答案更新您的答案。新 API 按名称访问列数据。

【参考方案2】：

API 最近发生了变化，您现在应该使用 aData['Column1'] 而不是 aData[0]

【参考方案3】：

createdRow 功能已在 v 1.10 中添加

此回调在创建 TR 元素时执行（并且所有 TD 子元素都已插入），或者如果使用 DOM 源进行注册，则允许对 TR 元素进行操作。

这在使用延迟渲染 (deferRender) 或服务器端处理 (serverSide) 时特别有用，因此您可以在创建行时添加事件、类名信息或以其他方式格式化行。

https://datatables.net/reference/option/createdRow

例子：

    $('#example').dataTable(
        // ...
        "createdRow": function( row, data, dataIndex ) 
            if ( data["column_index"] == "column_value" ) 
                $( row ).css( "background-color", "Orange" );
                $( row ).addClass( "warning" );
            
        ,
        // ...
    );

【讨论】：

这对我有用，但我必须将“column_index”指定为列名（字符串）而不是索引（int）。