Javascript 是否有更好/高效的解决方案根据每个数据表单元格的值设置其样式？

我有一个

数据表

，其中的值是

动态插入的

。根据单元格的每个值，我需要更改其

背景色

，并添加一些其他

CSS

。我这里确实有一个解决办法 尽管在处理大数据时速度似乎较慢，但是否有其他方法可以实现这一点？所以,

  -> The styling does not disappear on sorting the column
  -> It's a little faster than it is now.

代码：

var t=$（'#示例'）。数据表（{
“iDisplayLength”：10，
“长度菜单”：[[10,25,50，-1]，[10,25,50，“全部”]，
“aaSorting”：[[1，‘asc']]，
“scrollX”：正确，
“卷轴崩溃”：没错，
“fixedColumns”：{“leftColumns”：2}，
“sScrollXInner”：“150%”，
“fixedHeader”：正确，
“rowCallback”：函数（行、数据）{
对于（var p=2；p对于（var k=1；k我猜在每行之后调用draw.add（）是致命的。试试看
在添加所有行后调用draw一次

$.each(md, function(i, x) {
    ....
    t.row.add(thisRow);
});
t.draw();

性能问题：

正如在另一个答案中指出的那样，您不应该在循环中调用
draw
。任何涉及到操作DOM的操作都可能非常昂贵，并且应该尽可能少地使用。因此，您可以在循环中操作数据，然后呈现：

$.each(md, function(i, x) {
    ....
    t.row.add(thisRow);
});
t.draw();

我相信这将大大加快速度，应该已经足够了。但是这种方法将一次迭代整个表。如果您有一个很长的表，您可以使用
drawCallback
（）而不是
rowCallback
，通过获取当前页面，只操作可见行：

"drawCallback": function( settings ) {
    var api = this.api();
    var visibleRows = api.rows( {page:'current'} ).data();
    // manipulate rows here
}

样式问题

这个问题很容易解决。您的方法实际上是可行的，但是当您对行进行排序时，会有一个类被添加到单元格中。
。sorting_1
。这个类有一个强大的选择器，并覆盖您的背景色定义：

table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: #f1f1f1;
}

你的选择是：

1-比上述规则更具体：

table.dataTable.display tbody tr.odd > td.highlight1{
 background-color: #e6ffe6 ;
} 

2-在样式定义中添加一个
！important
：

td.highlight1{
 background-color: #e6ffe6 !important;
} 

签出您更新的小提琴-
问题是
数据表
一次加载所有内容，然后将其隐藏。也许可以异步应用样式。是的@JonSG，我尝试了您提供的解决方案。它似乎部分起作用！只有附加到每个数据表的内容获得背景色，而不是t他把整个细胞都涂上了。这是颜色。有没有办法把整个细胞涂上颜色cell@JonSg-这与添加类有何不同？
td div[data color=“red”]{background color:red；}
==
td div.redBackground{background color:red；}
它们之间可能没有任何区别。主要的一点是，如果分页速度慢，则更多地尝试将style指令的应用作为数据加载的一部分。最终，如果加载/显示速度慢，则可能是对每行的draw调用。add（）这是主要问题。下面@HugoSilva建议使用drawCallback似乎是解决数据加载时附加格式问题的更好方法。我将从我的答案中删去这一点。你可以使用drawCallback添加适当的类，甚至设置链接，而不是rowCallback。谢谢@Hugo Silva的建议手势。我确实尝试过使用DrawCallback，但它似乎没有更新那些CSS更改。有人能告诉我哪里出了问题吗？
td.highlight1{
 background-color: #e6ffe6 !important;
}