根据过滤着色数据表中的行

Question

我需要突出显示与服务器数据相关的特定行（更改背景颜色）。例如，我正在获取Activated和Not-Active数据，因此我需要为具有Activated数据的整行添加绿色。

代码段 -

    for(i=1; i<=adminlen;i++)
        {           
            if(adminresults.drivers[i-1].loginstatus !== "blocked") {
                var loginstate = "Block";
            } else {
                var loginstate = "Unblock";
            }                       
            if(admins[i-1].driver_status === 'ON - FREE') {
                var linkone = '</td><td><a href="#" class="btn btn-success 
                btn-xs"><i class="fa fa-taxi"></i>'+admins[i-
                 1].driver_status;
             } else if(admins[i-1].driver_status === 'ON - TRIP') {
                 var linkone = '</td><td><a href="#" class="btn btn-default 
                   btn-xs"><i class="fa fa-taxi"></i>'+admins[i-
                   1].driver_status;
             } else if(admins[i-1].driver_status === 'OFF') {
                 var linkone = '</td><td><a href="#" class="btn btn-danger 
                    btn-xs"><i class="glyphicon glyphicon-off">
                      </i>'+admins[i-1].driver_status;
             } else if(admins[i-1].driver_status === 'BREAK') {
                 var linkone = '</td><td><a href="#" class="btn btn-default 
                  btn-xs"><i class="fa fa-coffee"></i>'+admins[i-
                  1].driver_status;
             } else {
                var linkone = '</td><td><a href="#" class="btn btn-warning 
                    btn-xs"><i class="glyphicon glyphicon-off">
                    </i>'+admins[i-1].driver_status;
             }               
            var driverid = admins[i-1].driverid;                
             var $formrow = '<tr><td><a id="'+admins[i-1].driverid+'" 
               onclick="myFunction2(this.id);" data-toggle="modal" data-
                 target="#myModal"  value="'+admins[i-
                1].driverid+'">'+admins[i-1].firstname+
             '</a></td><td>'+admins[i-1].lastname+
             '</td><td>'+admins[i-1].phonenumber+
             '</td><td>'+admins[i-1].vehiclenumber+
             linkone+                
             '</td><td>'+admins[i-1].loginstatus+
             '</td><td><a href="#" class="btn btn-success btn-
                  xs">'+admins[i-1].accountstate+'</a></td></tr>';
            $('#example').append($formrow);         
        }
        $(document).ready(function() {

            $('#example').DataTable();
        });



      <div class="table-responsive">
       <table id="example" class="display" cellspacing="0">
         <thead><tr><th>First Name</th><th>Last Name</th>
            <th>Phone Number</th><th>Vehicle Number</th><th>Duty Status</th>
            <th>Login Status</th><th>Account Status</th></tr>
         </thead>
      </table>
    </div>

 $('#example')
    .removeClass( 'display' )
    .addClass('table table-striped table-bordered');

Answer 1

在迭代数据的同时为元素设置css类。

CSS类看起来像这样：

tr.active {
    background-color: green;
}
tr.disabled {
    background-color: red;
}