Відсортуйте таблицю

Ось таблиця:

<table>
<thead>
  <tr>
    <th>Ім’я</th><th>Прізвище</th><th>Вік</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Сергій</td><td>Петренко</td><td>10</td>
  </tr>
  <tr>
    <td>Юрій</td><td>Даниленко</td><td>15</td>
  </tr>
  <tr>
    <td>Анна</td><td>Ткаченко</td><td>5</td>
  </tr>
  <tr>
    <td>...</td><td>...</td><td>...</td>
  </tr>
</tbody>
</table>

В таблиці може бути більше рядків.

Напишіть код для сортування по імені, колонка "name".

Відкрити пісочницю для завдання.

Рішення коротке, але може виглядати дещо складним, тому я надаю його з розширеними коментарями:

          let sortedRows = Array.from(table.tBodies[0].rows) // 1
  .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));

table.tBodies[0].append(...sortedRows); // (3)
        

Покроковий алгоритм:

Отримати всі <tr> з <tbody>.
Потім відсортувати їх порівнюючи за вмістом першого <td> (поле «Ім’я»).
Вставити вузли в правильному порядку .append(...sortedRows).

Нам не потрібно видаляти існуючі рядки з таблиці, лише повторно вставити і вони автоматично залишать своє попереднє місце розташування.

P.S. У нашому випадку в таблиці є явний <tbody>, але навіть якщо HTML-таблиця не має <tbody>, він завжди є в структурі DOM.

Відкрити рішення в пісочниці.