如何根據使用jquery應用顏色的顏色對錶格行進行排序

Question

我正在使用node.js，jade，socket.io和jquery。我成功創建了聊天應用程序，並以綠色圓點和離線用戶的方式顯示在線用戶，並在表格中以紅色點表示。顏色取決於條件，所以我使用Jquery來應用顏色。現在，我需要在頂部顯示所有在線用戶。我的想法是按行的顏色排序，以便綠色顯示在最上面。
這是我的代碼。

  table 
        tr 
        td 
         button(type="submit" class="user2" style="width:70px;text-align:left;color:blue",class="btn btn-link") All 
        td 
         label(style="width:10px; color:#04CA3A" class="glyphicon glyphicon-one-fine-full-dot") 
       br 
       each item in content.logincount  
        - for(var i =0; i< item; i++) 
         table#table 
         tr 
          td  
          button(type="submit" class="user1" id="in"+i style="width:70px;text-align:left" class="btn btn-link") 
          br 
          td 
          label(style="width:10px" , id="i"+i class="glyphicon glyphicon-one-fine-full-dot" class="sort")       

Script代碼：

  ` jQuery(function($){  
       socket.on('usernames',function(data2){ 
       var html=''; 
       var data1=[]; 


      socket.on('userdetails',function(data,id){ 

      for(var i=0;i<data.length;i++){ 

      if($.inArray(data[i],id) ==-1){ 

       $('#in'+i).val(data[i]); 
       $('#in'+i).text(data[i]); 
       $('#i'+i).css('color','#D62904'); 
      } 
      else{ 
       $('#in'+i).val(data[i]); 
       $('#in'+i).text(data[i]); 

       $('#i'+i).css('color','#04CA3A'); 
      } 
      } 
      }); 
      });` 

輸出：Click to see the result.

Answer 1

您可以使用電流回路，只是設定後轉動連接的用戶行至表的頂部他們的顏色...

socket.on('userdetails',function(data,id) { 

    for (var i=0; i<data.length; i++) { 

     $('#in'+i).val(data[i]).text(data[i]); 

     if ($.inArray(data[i],id) == -1) { // Offline user. 
      $('#i'+i).css('color','#D62904'); 
     } 
     else { // Online user. 
      $('#i'+i).css('color','#04CA3A') 
        .closest('tr').prependTo($('#i'+i).closest('table')); 
     } 
    } 
}); 

注：

1. 如果id是一個JavaScript陣列（看起來像），JavaScript的原生功能.indexOf()更快了，jQuery $.inArray()，所以你可以使用...

   if (id.indexOf(data[i]) == -1) { // Offline user. 
   

2. 如果您將id添加到用戶表中，您可以直接選擇它（再次更快）...

   HTML

   <table id="userstable"... 
   

   JQUERY

   var $userstable = $('table#userstable'); 
   $('#i'+i).css('color','#04CA3A') 
        .closest('tr').prependTo($userstable); 
   

因此，把一切融合在一起......

socket.on('userdetails',function(data,id) { 

    var $userstable = $('table#userstable'); 

    for (var i=0,l=data.length; i<l; i++) { 

     $('#in'+i).val(data[i]).text(data[i]); 

     if (id.indexOf(data[i]) == -1) { // Offline user. 
      $('#i'+i).css('color','#D62904'); 
     } 
     else { // Online user. 
      $('#i'+i).css('color','#04CA3A') 
        .closest('tr').prependTo($userstable); 
     } 
    } 
}); 

我希望它能幫助