Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2018, 19:13
Новичок на форуме
Отправить личное сообщение для Neotwalker Посмотреть профиль Найти все сообщения от Neotwalker
 
Регистрация: 04.04.2018
Сообщений: 7

Сортировка таблицы 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 -->
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2018, 19:22
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML;


80ая строка
Ответить с цитированием
  #3 (permalink)  
Старый 09.04.2018, 19:24
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

чтобы вернуть первоначальное состояние, нужно его сохранить
var save = document.getElementById('mytab').innerHTML;

а затем вернуть по кнопке или как вам угодно
document.getElementById('mytab').innerHTML = save;
Ответить с цитированием
  #4 (permalink)  
Старый 09.04.2018, 19:24
Новичок на форуме
Отправить личное сообщение для Neotwalker Посмотреть профиль Найти все сообщения от Neotwalker
 
Регистрация: 04.04.2018
Сообщений: 7

С этим я справился уже просто переставив col'ы. Но все равно спасибо)
Ответить с цитированием
  #5 (permalink)  
Старый 09.04.2018, 20:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

сортировка двух колоночной таблицы
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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
сортировка строк таблицы atanov Javascript под браузер 17 10.01.2018 18:10
Сортировка таблицы Ajax TheLegi0ner jQuery 1 22.11.2015 12:11
Сортировка таблицы по алфавиту dozer Events/DOM/Window 6 18.10.2014 00:22
Сортировка таблицы (даты) edmundantes Элементы интерфейса 4 17.05.2012 09:51
Сортировка таблицы, при помощи js Prizrak177 Общие вопросы Javascript 10 02.09.2010 12:17