Retro_1477,
<!DOCTYPE html>
<html>
<head>
<title>Сортер</title>
<meta charset="utf-8">
<style type="text/css">
#ceo{border:5px ridge #73766f;border-collapse:collapse}
#ceo thead,th{background:-webkit-linear-gradient(top right,#b8b9b1,#fff);background:-moz-linear-gradient(top right,#b8b9b1,#fff);background:-o-linear-gradient(top right,#b8b9b1,#fff);background:-ms-linear-gradient(top right,#b8b9b1,#fff);text-align:center;vertical-align:text-top;padding:10px;border-bottom:3px ridge #73766f;border-left:1px solid #73766f;border-collapse:collapse}
#ceo td,tr{text-align:left;vertical-align:text-top;padding:10px;border:1px solid #73766f;border-collapse:collapse;background:#fff}
#ceo{
counter-reset: headings 0;
}
#ceo tbody td:first-child:before {
counter-increment: headings 1;
content: counter(headings, decimal) " ";
}
.desc:after{
content: "\25BC"
}
.asc:after{
content: "\25B2"
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var rows = $("#ceo tbody tr").get();
$("table").on("click", "th:not(:first)", function() {
var index = $(this).index(),
thClass = $(this).hasClass("asc") ? "desc" : "asc";
$("#ceo th").removeClass("asc desc");
$(this).addClass(thClass);
rows.sort(function(a, b) {
var aValue = $(a).find("td").eq(index).text(),
bValue = $(b).find("td").eq(index).text();
return aValue > bValue ? 1 : aValue < bValue ? -1 : 0
});
if (thClass == "desc") rows.reverse();
$("#ceo tbody").append(rows)
})
});
</script>
</head>
<body>
<table id="ceo">
<thead>
<tr>
<th title="num">#</th>
<th title="Name">Имя</th>
<th title="Gender">Gender</th>
<th title="Age">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="content">Алёша</td>
<td class="content">М</td>
<td class="content">22</td>
</tr>
<tr>
<td></td>
<td class="content">Пётр</td>
<td class="content">М</td>
<td class="content">19</td>
</tr>
<tr>
<td></td>
<td class="content">Яна</td>
<td class="content">Ж</td>
<td class="content">18</td>
</tr>
</tbody>
</table>
</body>
</html>