如何根据数据表中的值更改单元格的颜色

Question

我有一个基于Datatable插件和json的表，我需要根据值更改最后一个单元格的颜色，例如，较低值的颜色将为绿色，橙色为中等，较高的颜色将为红色。尝试过，但不起作用。谁能帮助我。这是下面的代码。

HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="script.js"></script>
<div id="div">
<div>
 <table id="example">
        <thead>
            <tr>            
                <th>name</th>
                <th>stargazerscount</th>
                <th>forkscount</th>
                <th>description</th>               
            </tr>
        </thead>
        <tbody>          
        </tbody>
    </table>

    </div>  
</div>  

script.js

  $( document ).ready(function() {

    $('#example').DataTable( {
        "columnDefs": [ {
    "targets": 3,
    "createdCell": function (td, cellData, rowData, row, col) {
      if (( cellData > 3 ) && ( cellData < 10 )){
        $(td).css('color', 'green')
      }
      else
           if (( cellData > 11 ) && ( cellData < 45 )){
        $(td).css('color', 'orange')
      }
      else
           if (( cellData > 45 ) && ( cellData < 100 )){
        $(td).css('color', 'red')
      }
    }
  } ],

language: {
        searchPlaceholder: "Search records"
    },
 "ajax": {
             "type"   : "POST",
            "url": "http://localhost/datatables/colorchange/1.json",
             "dataSrc": function (json) {
      var return_data = new Array();
      for(var i=0;i< json.length; i++){

        return_data.push({

         'name': json[i].name,
          'stargazerscount'  : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
           'forkscount'  : json[i].forkscount,
          'description' : json[i].description,

        })

      }
      return return_data;
             }
    },

        "columns": [
            { "data": "name" },
            { "data": "stargazerscount" },
            { "data": "forkscount" },
            { "data": "description" }

        ]

}); 
});

1.json

[{
            "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "5"
        },
        {
             "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "4"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "15.5"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "25.5"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "45.5"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "25.5"
        },
        {
              "name": "event 1",
            "stargazerscount": "program 1",
            "forkscount": "3",
            "description": "75.5"
        }


    ]