数据表更改颜色背景

Question

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

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

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

<table>
    <tr>
        <td>Acer computer</td>
        <td>Ram 32 gb</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Acer computer</td>
        <td>Ram 32 gb</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Acer computer</td>
        <td>Ram 16 gb</td>
        <td>0</td>
    </tr>
</table>

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

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

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

数据table可以吗？有可用的 jsfiddle 帮助吗？

Answer 1

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

<table>
<tr>
    <td>Acer computer</td>
    <td>Ram 32 gb</td>
    <td>0</td>
</tr>
<tr>
    <td data-changed='true'>Acer computer</td>
    <td>Ram 32 gb</td>
    <td>0</td>
</tr>
<tr>
    <td>Acer computer</td>
    <td>Ram 16 gb</td>
    <td>0</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++;  

      }
    });
});

试试这个 fiddle

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

数据表更改颜色背景

Datatables change color background

javascript

datatable

jquery

server-side

datatables