117 lines
3.1 KiB
HTML
Executable file
117 lines
3.1 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) {
|
||
var target = e && e.target || window.event.srcElement;
|
||
|
||
if (target.tagName != 'TH') return;
|
||
|
||
// Если TH -- сортируем
|
||
sortGrid(target.cellIndex, 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);
|
||
|
||
|
||
// Убрать TR из TBODY.
|
||
// Присваивание tbody.innerHTML = '' не работает в IE
|
||
//
|
||
// на самом деле без этих строк можно обойтись!
|
||
// при добавлении appendChild все узлы будут сами перемещены на правильное место!
|
||
while(tbody.firstChild) {
|
||
tbody.removeChild(tbody.firstChild);
|
||
}
|
||
|
||
|
||
// добавить результат в нужном порядке в TBODY
|
||
for(var i=0; i<rowsArray.length; i++) {
|
||
tbody.appendChild(rowsArray[i]);
|
||
}
|
||
|
||
grid.appendChild(tbody);
|
||
|
||
}
|
||
|
||
// P.S. В IE7 cells, cellIndex не работают, если элемент вне документа
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|