根据内容更改jQuery数据表的单元格背景

Posted 2023-05-09

【中文标题】根据内容更改jQuery数据表的单元格背景

【英文标题】：change cell background of jquery datatable based on content

【发布时间】：2012-02-23 02:33:00

【问题描述】：

我是数据表的新手 - http://datatables.net/ - 。我很难找到一个示例，如何根据单元格的位置和内容更改单元格的背景颜色。

这样的方法对我有用，只是所选行的突出显示现在是 已更改背景颜色的单元格中的“过度着色”。如果我可以在 fnRowCallback 中获取行的类名，那么我可以处理它。

$(document).ready(function() 

   // Add a click handler to the rows - this could be used as a callback 
   $("#example tbody").click(function(event) 

      $(oTable.fnSettings().aoData).each(function() 
         $(this.nTr).removeClass('row_selected');
      );
      (event.target.parentNode).addClass('row_selected');
   );


   oTable = $('#example').dataTable(

      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) 

         $(nRow).children().each(function(index, td) 

            if (index == 6) 

               if ($(td).html() === "pending") 
                  $(td).css("background-color", "#078DC6");
                else if ($(td).html() === "rendering") 
                  $(td).css("background-color", "#FFDE00");
                else if ($(td).html() === "success") 
                  $(td).css("background-color", "#06B33A");
                else if ($(td).html() === "failure") 
                  $(td).css("background-color", "#FF3229");
                else 
                  $(td).css("background-color", "#FF3229");
               
            
         );
         return nRow;
      ,
      "bProcessing": true,
      "bServerSide": true,
      "sAjaxSource": "scripts/server_processing.php",
      "sPaginationType": "full_numbers",
   );
);

【问题讨论】：

我们可能至少需要一个关于您特别想要的东西的想法。你能给我们举一些例子吗？

我有类似下面的内容。我想根据单元格的内容设置第 6 列单元格的背景，例如如果内容是“A”，那么我想将背景设置为红色。 oTable = $('#example').dataTable( "bProcessing": true, "bServerSide": true, "sAjaxSource": "scripts/server_processing.php", "sPaginationType": "full_numbers" );

【参考方案1】：

我知道这个问题已经得到解答，但我想我会分享我如何通过以下方式将各种“条件格式”应用于各种单元格：

首先，我在数据表初始化期间为每一列添加了一个类：

"aoColumns": [
                "mDataProp": "serial",
                "sClass": "serial"
            , 
                "mDataProp": "us",
                "sClass": "us"
            ...],

然后，我创建了一个 addFormat() 函数，该函数在每次重绘时都被调用（我必须这样做，因为我有一个实时更新的实时表）：

"fnDrawCallback": function(oSettings)  addFormat(); ,

在 addFormat 函数中，我基本上通过 CSS 类定义了所有格式规则。我使用了jQuery :contains extension，以便通过正则表达式等应用非常具体的规则。这些规则的选择器将是 td 以及我在数据表初始化期间分配给列的任何类：

 $("td.us:containsRegex(/^[xtfv]$/)").addClass("s4 queue");

这对我来说效果很好。

【参考方案2】：

您可以根据单元格值动态更改单元格的背景颜色

"mData": "index", "sClass": "center" ,"fnRender": function(obj) 
                                              var index  = obj.aData.index;
                                              var isActive  = obj.aData.isActivated;
                                              if(isActive == true)
                                                  obj.oSettings.aoColumns[obj.iDataColumn].sClass = "greenBackground"
                                              else
                                                  obj.oSettings.aoColumns[obj.iDataColumn].sClass = "yellowBackground"
                                              
                                              return index;
                                           ,

【讨论】：

这很好用，但我不得不将：obj.oSettings.aoColumns[obj.iDataColumn].sClass = "greenBackground" 改为：obj.settings.aoColumns[obj.iDataColumn].sClass = "greenBackground "

我想做类似的事情。添加我从代码中获取的 css 并将其保存在属性中到其他属性。

【参考方案3】：

$('table:last tr:nth-child(2) td:nth-child(2)').
  css("background-color", "#cccccc");

【讨论】：

感谢您的回答。它有效，我可以更改背景颜色，但不幸的是我不确定我可以在哪个数据表回调中获取单元格内容以及如何获取。

【参考方案4】：

我没有对此进行测试，但这样的事情应该会给你一个想法：

// Change i-th row j-th column
var rows = document.getElementById("myTable").getElementsByTagName('tr');
var columns = rows[i].getElementsByTagName('td');
jQuery( columns[j] ).css("background-color", "#cccccc");

【参考方案5】：

以下是如何通过createdCell 有条件地设置单元格样式，使用DataTables 1.10+ syntax。

"columnDefs": [

        "targets": [6],
        "createdCell": function(td, cellData, rowData, row, col) 
            var color;
            switch(cellData) 
            case "pending":
                color = '#078DC6';
                break;
            case "success":
                color = '#FFDE00';
                break;
            case "failure":
                color = '#06B33A';
                break;
            default:
                color = '#FF3229';
                break;
            
            $(td).css('background',color);
        
    
],

【参考方案6】：

这对我有用。 data[3] 表示我们正在查看的行的第 4 列（请记住，javascript 中的数组是从零开始的，即它们从零开始编号）。但是当我们想改变单元格背景时，我们使用 .eq(3) 语法。

"createdRow": function ( row, data, index ) 
    if ( data[3] == "pending" ) 
        $('td', row).eq(3).css('background-color', '#078DC6');
    
    if ( data[3] == "rendering") 
        $('td', row).eq(3).css('background-color', '#FFDE00');