Форум

atanov · #1 (**permalink**) 09.10.2017, 12:20

Доброго времени уважаемым гуру javascript'а. Что-то я никак не врублюсь как вывести после сортировки строк таблицы. Вроде всё понятно - загоняю строки в массив, потом его

массив.sort

. А как потом отобразить?

рони · #2 (**permalink**) 09.10.2017, 12:29

atanov,
appendChild

рони · #3 (**permalink**) 09.10.2017, 12:34

atanov,
https://javascript.ru/forum/dom-wind...tml#post423160

atanov · #4 (**permalink**) 10.01.2018, 11:37

Попробую эту тему оживить.
Скорее всего руки кривые, вряд ли sort работает неправильно, но...

function sorttable (e){
	var tbody = document.getElementsByTagName('tbody')[1];
    var rowsArray = [].slice.call(tbody.rows);	
	var compare;
	compare = function(rowA, rowB) {
	return rowA.cells[2].textContent > rowB.cells[2].textContent;}
	rowsArray.sort(compare);
	alltable.removeChild(tbody);
	for (var i = 0; i < rowsArray.length; i++) {
        tbody.appendChild(rowsArray[i]);
      }
      alltable.appendChild(tbody);
}

этот код вроде должен сортировать строки по строковому значению 3-й ячейки. Сортирует странно - скажем значения на латинскую букву 'A' идут правильно, потом бац идёт несколько строк на 'C', 'S' и т.д. тоже в виде блоков. Какой-то закономерности не обнаружил. Сижу чешу репу, подозрение падает на return:

rowA.cells[2].textContent > rowB.cells[2].textContent;

На дурака смотрел alert'ом: sort пары берёт, правда как попало (ну да, конечно ни как попало; знаю, что это фича sort в javascript). А вот как проверить правильность сортировки каждого шага, мож чё и увижу?

рони · #5 (**permalink**) 10.01.2018, 11:44

atanov,
в compare напишите полноценный вариант условий

atanov · #6 (**permalink**) 10.01.2018, 12:06

рони,
Не врубаюсь, а чё туда добавить-то? Вроде там только латинские букавы... Или я не прав, что этого:

rowA.cells[2].textContent > rowB.cells[2].textContent;

недостаточно?

рони · #7 (**permalink**) 10.01.2018, 12:30

atanov,
свой-порядок-сортировки

рони · #8 (**permalink**) 10.01.2018, 13:25

atanov,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<table width="400" id="alltable" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
	    <tr>
			<td>Cell 1.1</td>
			<td>B</td>
			<td>B</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>C</td>
			<td>C</td>
		</tr>
		<tr>
			<td>Cell 3.1</td>
			<td>A</td>
			<td>A</td>
		</tr>
	</tbody>
</table>
  <script>
function sorttable(table, index, up) {
  var tbody = table.querySelector("tbody");
  var rowsArray = [].slice.call(tbody.rows);
  var compare = function compareNumeric(a, b) {
    a = a.cells[index].textContent.trim();
    b = b.cells[index].textContent.trim();
    if (a > b) {
      return up ? 1 : -1;
    }
    if (a < b) {
      return up ? -1 : 1;
    }
  };
  var temp = document.createDocumentFragment();
  rowsArray.sort(compare).forEach(function(a) {
    temp.appendChild(a);
  });
  tbody.appendChild(temp);
}
;

var table = document.querySelector("#alltable");
sorttable (table, 2,true)
  </script>
</body>
</html>

atanov · #9 (**permalink**) 10.01.2018, 15:16

рони,
Спасибо большое.
Но наверное я неправильно объяснил. У меня не цифры, а текст латиницей. Ведь Ваш код и код по ссылке именно с цифрами оперируют?

Ещё, для самообразования хотел помучить - у Вас есть укороченные записи (который я никак не могу заставить себя выучить), можно разжевать для нуба, что они возвращают из функции:

if (a > b) {
      return up ? 1 : -1;
    }
if (a < b) {
      return up ? -1 : 1;
    }

В довесок - Вы любитель обращаться к элементу DOM через querySelector, вот так:

var tbody = table.querySelector("tbody");

Есть ли рациональное объяснение почему так лучше, чем обращение по id?

Ну и напоследок - восхищение использованием createDocumentFragment()!

рони · #10 (**permalink**) 10.01.2018, 15:35

Сообщение от atanov

У меня не цифры, а текст латиницей.

не понимаю ... в 3 ячейке, колонка Title 3, латиница ABC причём тут цифры?

что они возвращают из функции 1 или -1 или 0 если up == true и -1, 1, 0 если up == false или не указан.
вариант использования
sorttable (table, 2,true) // сортировка по возрастанию содержимого третьей ячейки
sorttable (table, 2) или sorttable (table, 2,false) // сортировка по убыванию содержимого третьей ячейки

document.getElementById() быстрее querySelector, но id редко когда действительно необходимо.

Форум

Справочник

Discord чат

Курсы javascript