datatables - 如何根据数据表中的值更改单元格的颜色
问题描述
我有一个基于 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>
脚本.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"
}
]
解决方案
推荐阅读
- javascript - 难以从异步函数返回值
- arrays - 具有索引值的序数集的数组?
- python - docker 中的微服务 FastAPI 测试,返回 404
- django - Django DeleteUser 的 URL 中的用户名
- node.js - IsAuthenticated 不能作为使用带有本地护照的 nodejs 的函数工作
- c++ - Modified Fibbonaci C++ getting a large negative number
- vue.js - Tailwind 不适用于带有 Sass 的 vue 4.3.1
- python-3.x - 如何提取具有不同模式的文件名的相同部分?
- python - 我想使用一个事件,但它没有注册,因为光标仍在输入字段中(tkinter)
- c# - C# 启动命令提示符未关闭