<style>  
  .apotr td {  
  background:rgba(250, 200, 200, 0.8);  
  padding:5px;  
  font-weight:bold;  
  color:red;  
  }  
  .apouser td {  
  background:rgba(200, 250, 200, 0.8);  
  padding:5px;  
  }  

  .aposort td {  
  background:rgba(220, 220, 220, 0.8);  
  padding:5px;  
  }  
  </style>

<script>  
  $('table.uTable').hide().before('<table class="apotable" width="100%" cellpadding="0" cellspacing="2"><tr class="aposort">' + $('table.uTable tr:first').html() + '</tr></table>');  
  $(document).ready(function() {  
  for(i=2;i<$('select[name="group"] option').size();i++) {  
  $('table.apotable').append('<tr class="apotr" name="' + $('select[name="group"] option').eq(i).text() + '"><td colspan="7">' + $('select[name="group"] option').eq(i).text() + '</td></tr>')  
  $('table.uTable tr').each(function() {  
  if($(this).text().indexOf($('select[name="group"] option').eq(i).text()) != -1) {  
  $('tr[name="' + $('select[name="group"] option').eq(i).text() + '"]').after('<tr class="apouser">' + $(this).html() + '</tr>');  
  }  
  });  
  }  
  });  
  </script>