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

Question

我是数据表新手 - 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",
   });
});

Answer 1

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

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

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

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

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

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

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

这对我来说非常有效。

Answer 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;
                                          } },

Answer 3

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

Answer 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");

Answer 5

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

"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);
        }
    }
],

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

}