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

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

12580

2018-01-31 11:04

起源

我们可能至少需要一个你特别想要的东西的想法。你能举几个例子吗？ - Grim...

我有类似下面的东西。我想基于单元格的内容设置第6列的单元格的背景，例如，如果内容是“A”，那么我想将背景设置为红色。 oTable = $（'＃example'）。dataTable（{“bProcessing”：true，“bServerSide”：true，“sAjaxSource”：“scripts / server_processing.php”，“sPaginationType”：“full_numbers”}）; - Gabor Forgacs

答案:

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

2018-01-31 11:29

感谢你的回答。它可以工作，我可以改变背景颜色，但不幸的是我不确定在哪些数据表回调我可以获得单元格内容以及如何。 - Gabor Forgacs

fnGetData，fnUpdate， datatables.net/api - Tom Maeckelberghe

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

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

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

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

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

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

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

这对我很有用。

2018-02-06 14:23

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

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

2018-04-19 07:09

这很好但我不得不改变：obj.oSettings.aoColumns [obj.iDataColumn] .sClass =“greenBackground”to：obj.settings.aoColumns [obj.iDataColumn] .sClass =“greenBackground” - itsNotABlanket

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

我没有测试过这个但是这样的东西会给你一个想法：

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

2018-01-31 11:21

这是如何有条件地设置细胞样式 createdCell，使用 DataTables 1.10+语法。

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

2018-03-07 17:41

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

答案:

热门问题

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