Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2017, 12:20
Профессор
Отправить личное сообщение для atanov Посмотреть профиль Найти все сообщения от atanov
 
Регистрация: 27.06.2016
Сообщений: 180

сортировка строк таблицы
Доброго времени уважаемым гуру javascript'а. Что-то я никак не врублюсь как вывести после сортировки строк таблицы. Вроде всё понятно - загоняю строки в массив, потом его
массив.sort
. А как потом отобразить?
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2017, 12:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

atanov,
appendChild
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2017, 12:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

atanov,
https://javascript.ru/forum/dom-wind...tml#post423160
Ответить с цитированием
  #4 (permalink)  
Старый 10.01.2018, 11:37
Профессор
Отправить личное сообщение для atanov Посмотреть профиль Найти все сообщения от atanov
 
Регистрация: 27.06.2016
Сообщений: 180

Попробую эту тему оживить.
Скорее всего руки кривые, вряд ли 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

atanov,
в compare напишите полноценный вариант условий
Ответить с цитированием
  #6 (permalink)  
Старый 10.01.2018, 12:06
Профессор
Отправить личное сообщение для atanov Посмотреть профиль Найти все сообщения от atanov
 
Регистрация: 27.06.2016
Сообщений: 180

рони,
Не врубаюсь, а чё туда добавить-то? Вроде там только латинские букавы... Или я не прав, что этого:
rowA.cells[2].textContent > rowB.cells[2].textContent;

недостаточно?
Ответить с цитированием
  #7 (permalink)  
Старый 10.01.2018, 12:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

atanov,
свой-порядок-сортировки
Ответить с цитированием
  #8 (permalink)  
Старый 10.01.2018, 13:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сортировка строк по индексу ячейки (возрастание/убывание)
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>
Ответить с цитированием
  #9 (permalink)  
Старый 10.01.2018, 15:16
Профессор
Отправить личное сообщение для atanov Посмотреть профиль Найти все сообщения от atanov
 
Регистрация: 27.06.2016
Сообщений: 180

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

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

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от 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 редко когда действительно необходимо.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление строк в таблицу и скрытие таблицы. III Общие вопросы Javascript 39 20.11.2015 10:05
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
Изменение окраски строк таблицы, исходя из данных? Space-06 Events/DOM/Window 4 14.02.2012 21:32
Вопрос по each() и перебору строк таблицы battrack jQuery 1 09.02.2012 14:30
Перемещение строк таблицы в Firefox barcelona jQuery 17 23.02.2009 15:41