Sort Table with Row Spans
HTML
<button class="sort-table asc">Sort Alpha</button>
<table id="sort-table">
<thead>
<tr>
<th rowspan="2">Visitor</th>
<td>Scheduled In</td>
<td>Time In</td>
</tr>
<tr>
<td>Scheduled Out</td>
<td>Time Out</td>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">Santos Angelo Borodec</th>
<td>9am</td>
<td> </td>
</tr>
<tr>
<td>5pm</td>
<td> </td>
</tr>
<tr>
<th rowspan="2">Marcelina Mitch Whitebird</th>
<td>8am</td>
<td> </td>
</tr>
<tr>
<td>4pm</td>
<td> </td>
</tr>
<tr>
<th rowspan="2">Vince Shayne Trussell</th>
<td>6am</td>
<td> </td>
</tr>
<tr>
<td>2pm</td>
<td> </td>
</tr>
<tr>
<th rowspan="2">Teri Porfirio Wilhoite</th>
<td>7am</td<td> </td>
</tr>
<tr>
<td>3pm</td>
<td> </td>
</tr>
</tbody>
</table>
CSS
table, td, th {
border: 1px solid lightgray;
text-align: center;
}
tbody th {
color: steelblue;
}
JavaScript
$('.sort-table').click(function(e) {
var $sort = this;
var $table = $('#sort-table');
var $rows = $('tbody > tr',$table);
$rows.sort(function(a, b){
var keyA = $('th',a).text();
var keyB = $('th',b).text();
if($($sort).hasClass('asc')){
return (keyA > keyB) ? 1 : 0;
} else {
return (keyA > keyB) ? 1 : 0;
}
});
$.each($rows, function(index, row){
$table.append(row);
});
e.preventDefault();
});