Строка 3 кода:
.on('click', '
th:not(:first)', function () {
Строка 31 кода:
$(row).appendTo('#ceo tbody').find('td:first').text(index+1);
И
<script src="jquery-3.2.1.slim.min.js"></script>
<script src="script.js"></script>
не в конец таблицы, а в конец тела документа, то есть перед </body>
И лишнее в коде можно сократить:
<thead>
<tr>
<th title="num">#</th>
<th class="desc" title="Name">Имя</th>
<th class="desc" title="Gender">Gender</th>
<th class="desc" title="Age">Age</th>
</tr>
</thead>
$(function () {
$('#ceo').on('click', 'th:not(:first)', function () {
var dst = $(this),
tbl = $('#ceo tbody'),
index = dst.index(),
rows = [];
dst.toggleClass('asc desc');
tbl.find('tr').each(function () {
rows.push(this);
});
rows.sort(function (a, b) {
var aValue = $(a).find('.content').eq(index).text(),
bValue = $(b).find('.content').eq(index).text();
return aValue > bValue
? 1
: aValue < bValue
? -1
: 0;
});
if (dst.hasClass('desc')) rows.reverse();
$.each(rows, function (index, row) {
$(row).appendTo(tbl).find('td:first').text(index+1);
});
});
});
