如何更改 JQuery.DataTable 中特定单元格的背景？

Posted 2023-05-07

【中文标题】如何更改 JQuery.DataTable 中特定单元格的背景？

【英文标题】：How do you change background of specific cell in a JQuery.DataTable?

【发布时间】：2014-08-09 06:09:23

【问题描述】：

我正在尝试更改 DattaTable 中某些特定单元格的样式，但我不知道该怎么做。我知道如何更改整个专栏，但这不是我需要的。 所以假设我的数据是这样的：

name: "user1",
gender : "f",
age: 54
,
name: "user1",
gender : "m",
age: 33

在我的桌子上，我有

columns: [ 
data: "name"
,
data: "age"
]

我想突出显示，比如说，蓝色 case gender = "m" 或 red case gender = "f" 中的年龄单元格。

对我如何做到这一点有什么建议吗？

谢谢！

【参考方案1】：

您将使用column configuration's createdCell function。

基本上，您需要为性别列添加一个列定义，其中包含将在填充单元格时调用的回调。尝试将此对象添加到您的列数组中：

    
      data: "gender",
      createdCell: function(td, cellData, rowData, row, col)
        var color = (cellData === 'm') ? 'blue' : 'red';
        $(td).css('color', color);
      
    

Here is a working example.

【讨论】：

我实际上是想根据性别单元格更改年龄单元格（或任何其他单元格）的样式。但这也有效！这是完美的！谢谢！！

同上，但更改 CSS 时使用 'background-color'，而不是 'color'。

这比使用渲染回调和 css nth-child 选择器来定位 td 单元格的同一问题的其他答案要好得多！当然 createdCell 仅在 DataTables 1.10 版之后才可用。