数据表：根据值更改单元格颜色 [英] Datatables: Change cell color based on values
问题描述
我正在使用DataTable创建一个交互式表。我有9列，其中5列是值。我想根据它们的具体情况来更改每个单元格的背景颜色。
I am using DataTable to create an interactive table. I have 9 columns, 5 of which are values. I want to change the background color of each cell based on their specific.
我已经开始尝试首先更改整个行的颜色，因为这似乎很容易。但是我什么也改变不了。
I have started off trying to change the entire row color first as this seemed like an easier task. However I can't get anything to change.
我的代码如下：
<head>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function(){
$('#countryTable').DataTable();
});
</script>
<script>
$(document).ready( function () {
$('#countryTable ').DataTable({
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData[3] > 11.7 )
{
$(nRow).css('color', 'red')
}
else if ( aData[2] == "4" )
{
$(nRow).css('color', 'green')
}
}
});
</script>
</head>
<body>
<table id ="countryTable" class="display" cellspacing="0" data-page-length='193'>
<thead>
<tr>
<th>Rank</th>
<th>Country</th>
<th>Code</th>
<th>Total</th>
<th>Beer</th>
<th>Wine</th>
<th>Spirits</th>
<th>Other</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Estonia</td>
<td>EE</td>
<td>14.97</td>
<td>5.87</td>
<td>1.65</td>
<td>5.64</td>
<td>1.81</td>
<td>3 - Medium Risky</td>
</tr>
<tr>
<td>2</td>
<td>Belarus</td>
<td>BY</td>
<td>14.44</td>
<td>2.5</td>
<td>0.75</td>
<td>6.73</td>
<td>4.46</td>
<td>4 - Very Risky</td>
</tr>
</tbody>
我也尝试过使用以下功能，但没有运气。
如果有人可以帮助的话，将非常适合我，因为我非常喜欢Java脚本。
I have also tried using the following function but to no luck. If anyone could help it would be greatly appriciataed as I am very to to java script.
$(document).ready( function () {
$('#countryTable').DataTable({
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData[3] == "5" )
{
$('td', nRow).css('background-color', 'Red');
}
else if ( aData[3] == "4" )
{
$('td', nRow).css('background-color', 'Orange');
}
}
});
推荐答案
首先，只需初始化一次 DataTable ，然后根据您的问题，使用 rowCallback 而不是 fnRowCallBack ，如下所示：
First of all, initialize DataTable only once. Then as per your question, use rowCallback and not fnRowCallBack as shown below:
var oTable = $('#countryTable').DataTable({
'rowCallback': function(row, data, index){
if(data[3]> 11.7){
$(row).find('td:eq(3)').css('color', 'red');
}
if(data[2].toUpperCase() == 'EE'){
$(row).find('td:eq(2)').css('color', 'blue');
}
}
});
这里是小提琴
这篇关于数据表：根据值更改单元格颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
