具有三色行的Jquery数据表

Jquery datatable with tri color rows

本文关键字：Jquery 数据表 三色      更新时间：2024-01-12

我尝试了带有三色行的jquery数据表，这是交替重复的。但我只有两行彩色的重复。

已尝试具有三色行的jquery数据表
我正在使用属性偶数/奇数来着色

$(document).ready(function() {
    $('#example').dataTable();
} );
$(document).ready(function() {
 $("#example tr:even").css("background-color", "LightYellow");
 $("#example tr:odd").css("background-color", "LightBlue");
});

您不必使用jquery来实现这个CSS非常适合这个工作。试试这个。

/*tri color rows*/
table.dataTable tbody tr:nth-child(3n+1)  {background-color: #FFCCCC;}
table.dataTable tbody tr:nth-child(3n+2)  {background-color: #99D6AD;}
table.dataTable tbody tr:nth-child(3n)    {background-color: #EBD6FF;}
th {
background: #aaf;
}
thead{
    background: #aaf;
}
/* End: tri color rows*/

在js fiddle 中检查此演示

相关文章：