тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Сортировка DOM элементов на примере списка ul и таблицы

В данном уроке я покажу вам, как выполнить сортировку DOM элементов по их тексту. Решим задачу сначала на примере списка ul, а затем усложним ее и построим решение для сортировки HTML таблицы по заданной колонке.

Исходники кода

<ul id="list"> <li>5</li> <li>2</li> <li>1</li> <li>3</li> <li>4</li> </ul> <input type="submit" id="button"> let list = document.querySelector('#list'); let items = document.querySelectorAll('#list li'); let button = document.querySelector('#button'); button.addEventListener('click', function() { let sorted = [...items].sort(function(a, b) { return a.innerHTML - b.innerHTML; }); list.innerHTML = ''; for (let li of sorted) { list.appendChild(li); } });
#table { width: 300px; } #table td { border: 1px solid black; } <table id="table"> <tr> <td>3</td> <td>b</td> </tr> <tr> <td>4</td> <td>a</td> </tr> <tr> <td>2</td> <td>e</td> </tr> <tr> <td>5</td> <td>d</td> </tr> <tr> <td>1</td> <td>c</td> </tr> </table> <input type="submit" id="button"> let table = document.querySelector('#table'); let trs = document.querySelectorAll('#table tr'); let button = document.querySelector('#button'); button.addEventListener('click', function() { let sorted = [...trs].sort(function(a, b) { if (a.children[1].innerHTML >= b.children[1].innerHTML) { return 1; } else { return -1; } }); table.innerHTML = ''; for (let tr of sorted) { table.appendChild(tr); } });