<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700');
body {
font-family: 'Roboto';
}
td, th {
border: 2px solid red;
width: 150px;
height: 40px;
text-align: center;
}
table {
border-collapse: collapse;
margin: 20px auto;
}
th {
cursor: pointer;
}</style>
</head>
<body>
<table class="sort" id="sort" align="center">
<tr id="zag">
<td>ID</td>
<td>Имя</td>
<td>Фамилия</td>
<td>Сайт</td>
<td>Переключалка стилей</td>
</tr>
<tr>
<td>1</td>
<td>Александр</td>
<td>Шуркаев</td>
<td><a href="#">htmlcoder.visions.ru</a></td>
<td>Не-а</td>
</tr>
<tr>
<td>123</td>
<td>Пол</td>
<td>Соуден</td>
<td><a href="#">idontsmoke.co.uk</a></td>
<td>Угу</td>
</tr>
<tr>
<td>3</td>
<td>Джеффри</td>
<td>Зельдман</td>
<td><a href="#">zeldman.com</a></td>
<td>Угу</td>
</tr>
<tr>
<td>44</td>
<td>Аарон</td>
<td>Будман</td>
<td><a href="#">youngpup.net</a></td>
<td>Не-а</td>
</tr>
<tr>
<td>11</td>
<td>Глен</td>
<td>Мерфи</td>
<td><a href="#">glenmurphy.com</a></td>
<td>Не-а</td>
</tr>
<tr>
<td>15</td>
<td>Даниель</td>
<td>Боган</td>
<td><a href="#">waferbaby.com</a></td>
<td>Не-а</td>
</tr>
<tr>
<td>33</td>
<td>Ден</td>
<td>Бенджамин</td>
<td><a href="#">hivelogic.com</a></td>
<td>Угу</td>
</tr>
</table>
<table class="sort" align="center">
<thead>
<tr>
<th>Name</th>
<th>SecondName</th>
<th>Patronymic</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Макс</td>
<td>Троцкий</td>
<td>Ильич</td>
<td>77</td>
</tr>
<tr>
<td>Вася</td>
<td>Петров</td>
<td>Александрович</td>
<td>21</td>
</tr>
<tr>
<td>Петя</td>
<td>Иванов</td>
<td>Петрович</td>
<td>15</td>
</tr>
<tr>
<td>Миша</td>
<td>Ложкин</td>
<td>Васильевич</td>
<td>43</td>
</tr>
<tr>
<td>Владимир</td>
<td>Сидоров</td>
<td>Игоревич</td>
<td>33</td>
</tr>
<tr>
<td>Коля</td>
<td>Колбаскин</td>
<td>Олегович</td>
<td>41</td>
</tr>
</tbody>
</table>
<script>
addEventListener("load", function() {
(function(f) {
function g(c) {
return function(b, a) {
b = b.cells[c].textContent;
a = a.cells[c].textContent;
b = +b || b;
a = +a || a;
return b > a ? 1 : b < a ? -1 : 0
}
}
function init(d) {
const [{cells}, ...e] = [...d.rows];
const tbody = e[0].parentNode;
[...cells].forEach((c, b) => {
let a = 0;
c.addEventListener("click", () => {
e.sort(g(b));
a && e.reverse();
tbody.append(...e);
a ^= 1
})
})
}
document.querySelectorAll(f).forEach(init)
})(".sort")
});
</script>
</body>
</html>