什么决定了jquery数据表样式中的行颜色？

Question

在jquery数据表样式（这里是平滑度）中，它显示了具有不同颜色的行。 是什么决定每行显示哪种颜色？我怎么能改变这个？ 从下载包中的示例中查看下面的示例。

Answer 1

啊哈......我找到了答案。 在来自服务器表行的原始html文档中，其类别设置不同，具体取决于最后一列中的数据，例如：

<tr class="gradeC">

然后，您可以在datatable（）函数完成其工作后查看生成的html。它为类字符串添加偶数或奇数。像

<tr class="gradeC odd">

对列进行排序时，排序函数会将“sorting_1”添加到该列中单元格的类字符串中。

所有颜色都在css文件中设置如下：

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 */
table.display tr.odd.gradeA { background-color: #ddffdd; }
table.display tr.even.gradeA { background-color: #eeffee; }
table.display tr.odd.gradeA { background-color: #ddffdd; }
table.display tr.even.gradeA { background-color: #eeffee; }
table.display tr.odd.gradeC { background-color: #ddddff; }
table.display tr.even.gradeC { background-color: #eeeeff; }
table.display tr.odd.gradeX { background-color: #ffdddd; }
table.display tr.even.gradeX { background-color: #ffeeee; }
table.display tr.odd.gradeU { background-color: #ddd; }
table.display tr.even.gradeU { background-color: #eee; }

tr.odd { background-color: #E2E4FF; }
tr.even { background-color: white; }

tr.odd.gradeA td.sorting_1 { background-color: #c4ffc4; }
tr.odd.gradeA td.sorting_2 { background-color: #d1ffd1; }
tr.odd.gradeA td.sorting_3 { background-color: #d1ffd1; }
tr.even.gradeA td.sorting_1 { background-color: #d5ffd5; }
tr.even.gradeA td.sorting_2 { background-color: #e2ffe2; }
tr.even.gradeA td.sorting_3 { background-color: #e2ffe2; }
tr.odd.gradeC td.sorting_1 { background-color: #c4c4ff; }
tr.odd.gradeC td.sorting_2 { background-color: #d1d1ff; }
tr.odd.gradeC td.sorting_3 { background-color: #d1d1ff; }
tr.even.gradeC td.sorting_1 { background-color: #d5d5ff; }
tr.even.gradeC td.sorting_2 { background-color: #e2e2ff; }
tr.even.gradeC td.sorting_3 { background-color: #e2e2ff; }
tr.odd.gradeX td.sorting_1 { background-color: #ffc4c4; }
tr.odd.gradeX td.sorting_2 { background-color: #ffd1d1; }
tr.odd.gradeX td.sorting_3 { background-color: #ffd1d1; }
tr.even.gradeX td.sorting_1 { background-color: #ffd5d5; }
tr.even.gradeX td.sorting_2 { background-color: #ffe2e2; }
tr.even.gradeX td.sorting_3 { background-color: #ffe2e2; }
tr.odd.gradeU td.sorting_1 { background-color: #c4c4c4; }
tr.odd.gradeU td.sorting_2 { background-color: #d1d1d1; }
tr.odd.gradeU td.sorting_3 { background-color: #d1d1d1; }
tr.even.gradeU td.sorting_1 { background-color: #d5d5d5; }
tr.even.gradeU td.sorting_2 { background-color: #e2e2e2; }
tr.even.gradeU td.sorting_3 { background-color: #e2e2e2; }

Answer 2

在这种情况下，使用以下类别应用特定颜色。 gradeA，gradeB，gradeC等。我不确定那些是以某种方式动态生成的，或者是否使用了jQuery Theme Roller。我假设他们使用主题滚轮来生成样式。无论如何..您需要做的就是使用自定义类选项向表中添加类。

见这里： https://datatables.net/styling/custom_classes

然后从那里你可以做到这样的事情：

oTable = $('#example').dataTable( {  
    "aoColumns" : [     
        {  sClass: "myCustomClass" }  
    ]});

<强> - 和 -

table.display tr.even.myCustomClass { background-color: #ffdddd; }
table.display tr.odd.myCustomClass { background-color: #ffeeee; }

这是一个有点类似的问题：

Giving custom classes to each TD for styling - Datatables & jQuery

这里有一个过滤器：

datatables add class to filters