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 extension来使用正则表达式等非常具体的规则。我对这些规则的选择器将是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+ syntax通过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');
    }

}

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

6 个答案: