如何使用 ajax 加载数据将 css 样式添加到 table

Question

我有一个 table，其中数据通过 ajax 加载。栏目如下：

姓名 |电邮 | Delivery_date

现在我按交货日期订购数据。所以我想为那些具有相同交货日期的行着色，以便可以区分具有相同交货日期的行。

ps- 我正在使用数据tables 服务器端处理来动态加载数据

Answer 1

您可以为此使用 JQuery：

$("td:contains('<specific_date>')").parent().css({'background':'blue'})

Answer 2

您可以使用 row created callback 实现这一点，您只需构建函数 dateToOddOrEvenCssClass 即可将日期转换为 css class（假设我们将只有奇数和偶数两个选项):

$(document).ready(function() {
    $('#example').dataTable( {
        "createdRow": function ( row, data, index ) {
            $('td', row).eq(2).addClass( dateToOddOrEvenCssClass( data[2] ) ); //.eq(2) and data[2], 2 stands for Delivery_date column
        }
    } );
} );

更新 1.

如果奇数或偶数解决方案不适合您可以实现任何您想要的（我建议奇数或偶数因为您没有提供有关着色逻辑的详细信息），但是您从日期生成颜色并将该颜色添加为像这样为您的单元格设置样式：

$('td', row).eq(2).css( 'background-color', dateToColor( data[2] ) );

只需要实现dateToColor功能即可。

如何使用 ajax 加载数据将 css 样式添加到 table

How to add css styles to table with ajax loaded data

jquery

datatables