如何为数据表中动态添加的子行添加背景颜色？

Posted 2023-05-09

【中文标题】如何为数据表中动态添加的子行添加背景颜色？

【英文标题】：How may I add background color to dynamically added child rows in Datatables?

【发布时间】：2020-06-03 07:30:59

【问题描述】：

我将子行动态添加到数据表以显示动态获取的数据。这是代码：

var oTable = $('#myTable5').DataTable();
var tr = $('#'+id).closest('tr');
var row = oTable.row( tr );
console.log(row);
if ( row.child.isShown() ) 
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');

else 
    // Open this row
    row.child( format(dataSet) ).show();
    tr.addClass('shown');

但是对于我的生活，我无法弄清楚如何为这个子行添加背景颜色！我已经尝试了很多东西，但没有任何效果。如果您成功实现了这一点，请提供帮助。 在数据表论坛上发帖没有得到有效的回应。

TIA。

【问题讨论】：

在 CSS 中添加 trbackground-color: #f2f2f2;

这将为所有行添加背景颜色！这个问题专门针对动态添加到数据表的子行。

到新行或所有shown行？

只到新行

我建议您在子行中添加一个类，然后使用 !important 为该类创建一个 css

【参考方案1】：

您可以为子行设置背景，如下所示。 rowBackground 是一个 CSS 类。 工作fiddle here

row.child("child row",'rowBackground').show();

【讨论】：

有效！你是怎么想到的？

很好，它解决了您的问题:)。我浏览了 DataTable 论坛并找到了一个解决方案。幸运的是，我的历史中仍然有那个 url ;) 这里是 datatables.net/forums/discussion/26601/add-css-to-child-row

非常感谢队友！

给你更多的力量:)