javascript - 根据值更改数据表单元格的颜色

Question

我正在处理数据表，其中我必须根据来自服务器的值更改一个 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 版本

Answer 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) 选择器。