数据表更改颜色背景答案

【问题标题】：Datatables change color background数据表更改颜色背景
【发布时间】：2017-12-28 09:40:09
【问题描述】：

我正在使用服务器端进程开发基于 Datatables 的表。

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

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

<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 的背景颜色，因为值发生了变化。

我尝试使用 createdCell，但结果不佳。

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

可以使用数据表吗？有没有 jsfiddle 可以帮忙？

【问题讨论】：

让我们看看你是如何初始化数据表的，即你用createdCell...尝试了什么？目前尚不清楚“如果值与同一单元格位置中的前一行不同，则更改每个单元格的背景颜色”是什么意思。每次你有不同的值时，这都会改变，即你需要很多颜色，使用哪种颜色？
@davidkonrad 我遵循了数据表服务器端进程datatables.net/examples/data_sources/server_side.html 的示例。我发布了表格的输出，但是我要做的是在表格在$(document).ready(function(). 中初始化时标记值我每页只有一个项目，我将只使用一种颜色来标记变化

标签： javascript jquery datatable datatables server-side

【解决方案1】：

在这里使用 Datatables 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')
            }
        }
    }
    } ]

【讨论】：

【解决方案2】：

试试这个，
使用您的数据库值编辑此代码
通过使用您的 html 代码，我使用 jQuery 完成了一个简单的解决方案
使用 .each() 函数

 $(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/

【讨论】：

感谢您的回复，我将在接下来的几天内测试它，是否可以为数据表提供相同的脚本？谢谢
你可以在上面的代码中添加你的数据库变量，
将无法工作，因为 jQuery 将在表格填充之前加载，我发布带有数据表代码的 asnware。谢谢你的脚本

【解决方案3】：

我假设您有办法检查值的状态是否已更改。我的建议是在单元格中设置数据属性，如下例所示，然后使用 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>

【讨论】：

嗯不，因为我需要为每个单元格更改不同值的背景，例如，我喜欢在第二个 TR 中标记 ram 值和价格。每个产品的行数是动态的