Сортировка таблицы DOM
Не могу понять, почему не сортирует по первому столбцу, а только по второму и как сделать так, чтобы после сортировки таблицу можно было возвращать в начальное положение?
<!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 -->
|
return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML; 80ая строка |
чтобы вернуть первоначальное состояние, нужно его сохранить
var save = document.getElementById('mytab').innerHTML;
а затем вернуть по кнопке или как вам угодно
document.getElementById('mytab').innerHTML = save;
|
С этим я справился уже просто переставив col'ы. Но все равно спасибо)
|
сортировка двух колоночной таблицы
Neotwalker,
второй клик отменяет сортировку
<!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;
}
th.red{
background-color: Red;
color: White;
}
</style>
</head>
<body>
<table border="1px" cellpadding="10px" name="mytab" id="mytab">
<thead bgcolor="aqua">
<th align="center" >Фамилия</th>
<th 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");
var tbody = mytab.getElementsByTagName("tbody")[0];
var rows = tbody.querySelectorAll("tr");
mytab.onclick = function(e) {
if (e.target.tagName != "TH") {
return;
}
var index = e.target.cellIndex;
var sort = e.target.dataset.sort ^ 1;
var th = mytab.querySelectorAll("th")[+!index];
th.dataset.sort = 0;
th.classList.remove("red");
e.target.classList[sort ? "add" : "remove"]("red");
e.target.dataset.sort = sort;
sortGrid(index, !sort);
};
function sortGrid(colNum, sort) {
[].slice.call(rows).sort(function(rowA, rowB) {
if (sort) {
return 0;
}
if (colNum) {
return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
} else {
return rowA.cells[colNum].innerHTML.localeCompare(rowB.cells[colNum].innerHTML, "ru");
}
}).forEach(function(row) {
tbody.appendChild(row);
});
};
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:36. |