Sort Table with Row Spans
HTML
<button class="sort-table">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 = $table.find('tbody > tr:even').map(function () {
return $(this).next().andSelf().clone().wrapAll('<table />')
});
$rows.sort(function (a, b) {
var keyA = $('th', a).text();
var keyB = $('th', b).text();
if ($($sort).hasClass('asc')) {
return (keyA > keyB) ? 0 : 1;
} else {
return (keyA > keyB) ? 1 : 0;
}
});
var tbody = $('tbody', $table).empty();
$.each($rows, function (index, row) {
$(tbody).append($(row).unwrap());
});
e.preventDefault();
$($sort).toggleClass('asc');
});