Не могу понять, почему не сортирует по первому столбцу, а только по второму и как сделать так, чтобы после сортировки таблицу можно было возвращать в начальное положение?
<!DOCTYPE HTML>
<!-- Do not remove and do not change this string -->
<html>
<!-- сортировать таблицу -->
<head>
<meta charset=utf-8>
<style>
th{cursor: pointer;
}
th:hover {
background: yellow;
}
</style>
</head>
<body>
<table border="1px" cellpadding="10px" name="mytab" id="mytab">
<thead bgcolor="aqua">
<th data-type="col1" align="center" >Фамилия</th>
<th data-type="col2" align="center" >Телефон</th>
</thead>
<tbody>
<tr>
<td>Яковлев</td>
<td>7453217</td>
</tr>
<tr>
<td>Иванов</td>
<td>3453212</td>
</tr>
<tr>
<td>Бендер</td>
<td>8453212</td>
</tr>
<tr>
<td>Паниковский</td>
<td>6453212</td>
</tr>
<tr>
<td>Петров</td>
<td>8765432</td>
</tr>
<tr>
<td>Сидоров</td>
<td>5432345</td>
</tr>
<tr>
<td>Македонский</td>
<td>8765233</td>
</tr>
<tr>
<td>Иоанн 23</td>
<td>2345432</td>
</tr>
</tbody>
</table>
<script>
var mytab = document.getElementById('mytab');
mytab.onclick = function(e){
if(e.target.tagName != 'TH')
return;
sortGrid(e.target.cellIndex, e.target.getAttribute('data-type'));
};
function sortGrid(colNum, type){
var tbody = mytab.getElementsByTagName('tbody')[0];
var rowsArray = [].slice.call(tbody.rows);
var compare;
switch (type) {
case 'col1':
compare = function(rowA, rowB){
return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
};
break;
case 'col2':
compare = function(rowA, rowB){
return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML;
};
break;
}
rowsArray.sort(compare);
for (var i = 0; i < rowsArray.length; i++){
tbody.appendChild(rowsArray[i]);
}
mytab.appendChild(tbody);
}
</script>
</body>
</html>
<!-- Do not remove and do not change this string -->