如何更改 JQuery 数据表中的行颜色

Question

问题陈述：根据状态更改表行的颜色：

如果状态为活动状态，行颜色为绿色，如果状态为非活动状态，行颜色为红色/黄色。

我尝试了很多方法，但我认为引导表强制不更改行颜色。请指导我该怎么做？

数据：

[  
   "active",
   "inactive"
]

桌子：

<table id="employee" class="table table-striped table-sm table-hover">
    <thead>
        <tr>
            <th>Status</th>
        </tr>
    </thead>
</table>

JQuery 数据表：

$('#employee').DataTable({

    "aaData": dataOrPathToData,
    "aoColumns": [

        {"mDataProp":"status", "render": function(data, type, row, meta) {

            if( type==='display' ) {
                data = '<a>' + data  + '</a>';
            }
            return data;
        }}
    ]

});

我正在尝试产生这样的输出：

谢谢。

Answer 1

嗨@Badshah，您可以这样调用您的数据表。

$('#employee').dataTable({
    "rowCallback": function( row, data, index ) {
        if(index%2 == 0){
            $(row).removeClass('myodd myeven');
            $(row).addClass('myodd');
        }else{
            $(row).removeClass('myodd myeven');
             $(row).addClass('myeven');
        }
      }
});

你可以像这样定义你的 css 类：

table.dataTable tbody tr.myeven {
      background-color: #f2dede;
 }
table.dataTable tbody tr.myodd {
      background-color: #bce8f1;
 }

希望这可以帮助。