<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>