Question

我正在开发一个基于带有服务器端进程的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可以提供帮助？

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代码，我使用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/

Answer 3

使用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')
            }
        }
    }
    } ]

数据表更改颜色背景

3 个答案: