根据值更改数据表单元格的颜色 [英] change color of datatable cell depending on values

问题描述

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

I am working on data table in which I have to change the color of one td depending on values coming from server.

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

For now, I have successfully updated the color of complete row, But I am unable to change the color of only one cell in row.

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

Please see the attached image for current result.

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

You can see it change the whole color of row BUT I only need to change the color of Second column.

这是我的代码：

"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版本

推荐答案

使用jQuery的CSS函数更改颜色不是最好的方法，也不起作用

Changing the color with the CSS function of jQuery is not the best way, also it doesn't work as expected.

最好将类添加到特定的TD：

Better add a class to the specific 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看起来像这样：

The CSS would look like this:

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

编辑

为TD的：nth-​​child（2）选择器添加了。

Added the :nth-child(2) selector the TD's.

这篇关于根据值更改数据表单元格的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！