<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
th {
cursor: pointer;
}
th:hover {
background: yellow;
}
</style>
</head>
<body>
<table id="grid">
<thead id='header'>
<tr>
<th data-type="number">Возраст</th>
<th data-type="string">Имя</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>Вася</td>
</tr>
<tr>
<td>2</td>
<td>Петя</td>
</tr>
<tr>
<td>12</td>
<td>Женя</td>
</tr>
<tr>
<td>9</td>
<td>Маша</td>
</tr>
<tr>
<td>1</td>
<td>Илья</td>
</tr>
</tbody>
</table>
<script>
function sortColumn(colNum, type){
let body = document.getElementByTagName('tbody')[0];
document.removeChild(body);
let rows = [].slice.call(body.rows);
let sortFunction;
switch(type){
case 'number':
sortFunction = function(A, B){
return A.cells[colNum].innerHTML - B.cell[colNum].innerHTML;
};
case 'string':
sortFunction = function(A, B){
return A.cells[colNum].innerHTML > B.cell[colNum].innerHTML;
}
}
rows.sort(sortFunction);
for(let i = 0; i < rows.length; i++){
body.appendChild(rows[i]);
}
document.querySelector('grid').appendChild(body);
}
let thead = document.querySelector('#header');
thead.addEventListener('click', function(event){
if (event.target.tagName != 'th') return;
let cellIndex = event.target.cellIndex;
let typeColumn = event.target.getAttribute('data-type');
sortColumn(cellIndex, typeColumn);
});
</script>
</body>
</html>
