数据表更改颜色背景

Question

我正在开发一个基于服务器端进程的数据表。

如果值与同一单元格位置的前一行不同，我想更改每个单元格的背景颜色

这是我使用服务器端进程生成的输出表：

<table>
<tr>
<td>Acer computer</td>
<td>Ram 32 gb</td>
<td>$500</td>
</tr>
<tr>
<td>Acer computer</td>
<td>Ram 32 gb</td>
<td>$500</td>
</tr>
<tr>
<td>Acer computer</td>
<td>Ram 16 gb</td>
<td>$320</td>
</tr>
</table>

我想更改第二个 TR 的 TD 背景颜色，因为值已更改。

我尝试使用创建的单元格，但结果很糟糕。

https://datatables.net/reference/option/columns.createdCell

数据表可以吗？是否有可以提供帮助的 jsfiddle？

Answer 1

我假设您有办法检查值的状态是否已更改。我的建议是在单元格中设置数据属性，如下例所示，然后使用css更改颜色。

<table>
<tr>
<td>Acer computer</td>
<td>Ram 32 gb</td>
<td>$500</td>
</tr>
<tr>
<td data-changed='true'>Acer computer</td>
<td>Ram 32 gb</td>
<td>$500</td>
</tr>
<tr>
<td>Acer computer</td>
<td>Ram 16 gb</td>
<td>$320</td>
</tr>
</table>

Answer 2

试试这个，
使用你的html代码用你的数据库值
编辑这段代码，我已经使用.each((函数
用jQuery
做了一个简单的解决方案

$(document).ready(function(){
var n=1;
var j=0;
var prev_val = function(eq_no){
return  $('table tr:eq('+eq_no+') td:last').text();
}
$('table tr').each(function(){
var index_val = $('table tr').index($(this));
var fill_val = $(this).find('td:last').text();
if(index_val == n){
if(fill_val == prev_val(j)){
}
else{
$(this).find('td:last').css({"background":"#0d0d0d"});
}
n++;
j++;  
}
});
});

试试这个小提琴

https://jsfiddle.net/saifudazzlings/s05u3th0/1/

Answer 3

使用数据表 API 解决，此处的代码：

"columnDefs": [ {
"targets": [1,2,3,4,5,6,7,8,9,10,11,12,13,14],
"createdCell": function (td, cellData, rowData, row, col) {
if (row > 0) {
old = table.data(row - 1);
if ( cellData != old.row(row).column(col).data()[row-1] ) {
previous_row = old.row(row).column(col).nodes()[row-1]
$(previous_row).css('background-color', '#FFFF99')
}
}
}
} ]