JackShcherbakov
@JackShcherbakov

Почему заменяется содержимое таблицы?

Здравствуйте! Почему результатом кода ниже не является что-то вроде этого:
  • 1
  • 3
  • 5
  • 2
  • 4
  • 1//Тут работает функция table.append(tableTrs[i]) в цикле (строка (1))
  • 2
  • 3
  • 4
  • 5

Так вот, почему появляется не 10 пунктов, а всего 5! Я же просто к неотсортированной таблице прибавляю ее же, но только отсортированную. В чем дело?
Вот код (в строке (1) мне непонятно):
<body>
<table id="numbers">
	<tr><td>1</td></tr>
	<tr><td>3</td></tr>
	<tr><td>5</td></tr>
	<tr><td>2</td></tr>
	<tr><td>4</td></tr>
</table>

  <script>
  function sortTable(table){
  		let tableTrs = table.getElementsByTagName("tr");
  		tableTrs = [].slice.call(tableTrs);
  		tableTrs.sort(function(a, b){
  			return a.querySelector("td").innerHTML - b.querySelector("td").innerHTML;
  		});
  		for(let i =0; i<tableTrs.length; i++){
  			table.append(tableTrs[i])
  		}
  }
  sortTable(numbers);
  </script>

</body>
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Так вот, почему появляется не 10 пунктов, а всего 5!

Потому что вы пытаетесь добавить в таблицу элементы, которые там уже есть.

Добавляйте копии элементов:

const [ tbody ] = table.tBodies;
tbody.append(...Array
  .from(tbody.rows, n => [ n, +n.cells[0].textContent ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0].cloneNode(true))
);

Или создавайте новые пустые строки и копируйте разметку существующих:

[...table.rows]
  .sort((a, b) => a.innerText - b.innerText)
  .forEach(n => table.insertRow().innerHTML = n.innerHTML);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы