根据值更改数据表单元格的颜色答案

【问题标题】：change color of datatable cell depending on values根据值更改数据表单元格的颜色
【发布时间】：2017-11-24 12:30:15
【问题描述】：

我正在处理数据表，我必须根据来自服务器的值更改一个 td 的颜色。

目前，我已经成功更新了整行的颜色，但是我无法更改行中只有一个单元格的颜色。

请查看附件图片了解当前结果。

你可以看到它改变了行的整个颜色，但我只需要改变第二列的颜色。

这是我的代码：

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            if(aData.statusCode == "FAILED"){
                $("td", nRow).css("background-color", "Red");
            }
            if(aData.statusCode == "RUNNING"){
                 $("td", nRow).css("background-color", "green");
            }
        }

我使用的是 DataTables 1.10.15 版本

【问题讨论】：

标签： javascript datatables

【解决方案1】：

用jQuery的CSS函数改变颜色不是最好的方法，也不能按预期工作。

最好给特定的 TD 添加一个类：

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  if(aData.statusCode == "FAILED"){
    $("td:nth-child(2)", nRow).addClass("failed");
    $("td:nth-child(2)", nRow).removeClass("running");
  }
  if(aData.statusCode == "RUNNING"){
    $("td:nth-child(2)", nRow).removeClass("failed");
    $("td:nth-child(2)", nRow).addClass("running");
  }
}

CSS 看起来像这样：

td.failed {
  background-color: red;
}
td.running {
  background-color: green;
}

编辑

在 TD 中添加了 :nth-child(2) 选择器。

【讨论】：