jquery - 根据单元格值更改行背景颜色 DataTable

Question

我正在使用 DataTable 插件来显示一些记录。我有 3 行，名称、日期、金额。我希望该行的背景颜色根据金额列中的特定值进行更改。

这是我的代码:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    var table = $('#tid_css').DataTable({
      'iDisplayLength': 100,
      "bFilter": false,
      "aaSorting": [
        [2, "desc"]
      ]
    });
  });
</script>

作为测试，我在上面的代码旁边添加了下面的代码，但出现了以下错误

"DataTables warning: table id=tid_css - Cannot reinitialise DataTable"

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $('#tid_css').dataTable({
      "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        if (aData[2] == "1") {
          $('td:eq(2)', nRow).html('<b>1</b>');
        }
      }
    });
  });
</script>

在不同条件下使用 fnRowCallback 可以轻松地完成此操作，例如如果金额为 1，则颜色为红色、2 = 蓝色、3 = 蓝色 等等

Answer 1

好的，我自己解决了这个问题:

$(document).ready(function() {
  $('#tid_css').DataTable({
    "iDisplayLength": 100,
    "bFilter": false,
    "aaSorting": [
      [2, "desc"]
    ],
    "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
      if (aData[2] == "5") {
        $('td', nRow).css('background-color', 'Red');
      } else if (aData[2] == "4") {
        $('td', nRow).css('background-color', 'Orange');
      }
    }
  });
})