106 lines
No EOL
2.6 KiB
HTML
Executable file
106 lines
No EOL
2.6 KiB
HTML
Executable file
<!DOCTYPE HTML>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<style>
|
||
th {
|
||
cursor: pointer;
|
||
}
|
||
|
||
th:hover {
|
||
background: yellow;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<table id="grid">
|
||
<thead>
|
||
<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>
|
||
// сортировка таблицы
|
||
// использовать делегирование!
|
||
// должно быть масштабируемо:
|
||
// код работает без изменений при добавлении новых столбцов и строк
|
||
|
||
var grid = document.getElementById('grid');
|
||
|
||
grid.onclick = function(e) {
|
||
if (e.target.tagName != 'TH') return;
|
||
|
||
// Если TH -- сортируем
|
||
sortGrid(e.target.cellIndex, e.target.getAttribute('data-type'));
|
||
};
|
||
|
||
function sortGrid(colNum, type) {
|
||
var tbody = grid.getElementsByTagName('tbody')[0];
|
||
|
||
// Составить массив из TR
|
||
var rowsArray = [].slice.call(tbody.rows);
|
||
|
||
// определить функцию сравнения, в зависимости от типа
|
||
var compare;
|
||
|
||
switch (type) {
|
||
case 'number':
|
||
compare = function(rowA, rowB) {
|
||
return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
|
||
};
|
||
break;
|
||
case 'string':
|
||
compare = function(rowA, rowB) {
|
||
return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
|
||
};
|
||
break;
|
||
}
|
||
|
||
// сортировать
|
||
rowsArray.sort(compare);
|
||
|
||
// Убрать tbody из большого DOM документа для лучшей производительности
|
||
grid.removeChild(tbody);
|
||
|
||
// добавить результат в нужном порядке в TBODY
|
||
// они автоматически будут убраны со старых мест и вставлены в правильном порядке
|
||
for (var i = 0; i < rowsArray.length; i++) {
|
||
tbody.appendChild(rowsArray[i]);
|
||
}
|
||
|
||
grid.appendChild(tbody);
|
||
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |