2017-05-02 33 views
2

我需要突出显示与服务器数据相关的特定行(更改背景色)。例如,我得到激活和非激活数据,所以我需要将绿色添加到激活数据的完整行。同时,通过你的数据迭代根据过滤为数据表中的行着色

Below Image shows my data from the server

代码snippet-

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'); 
+0

您正在使用的数据表 –

+0

你是如何构建表?请发布该代码。 – George

回答

0

的元素设置CSS类。

CSS类看起来是这样的:

tr.active { 
    background-color: green; 
} 
tr.disabled { 
    background-color: red; 
} 
相关问题