Мы хотим сделать этот проект с открытым исходным кодом доступным для людей во всем мире. Пожалуйста, помогите нам перевести это руководство на другие языки.
КупитьEPUB/PDF
Карта учебника
вернуться к уроку

Сортировка таблицы

важность: 5

Вот таблица:

<table>
<thead>
  <tr>
    <th>Name</th><th>Surname</th><th>Age</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>John</td><td>Smith</td><td>10</td>
  </tr>
  <tr>
    <td>Pete</td><td>Brown</td><td>15</td>
  </tr>
  <tr>
    <td>Ann</td><td>Lee</td><td>5</td>
  </tr>
  <tr>
    <td>...</td><td>...</td><td>...</td>
  </tr>
</tbody>
</table>

В ней может быть больше строк.

Напишите код для сортировки по столбцу "name".

Открыть песочницу для задачи.

Решение короткое, но может показаться немного сложным, поэтому здесь я предоставлю подробные комментарии:

let sortedRows = Array.from(table.rows)
  .slice(1)
  .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);

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

  1. Получим все <tr>, как table.querySelectorAll('tr'), затем сделаем массив из них, потому что нам понадобятся методы массива.

  2. Первый TR (table.rows[0]) – это заголовок таблицы, поэтому мы берём .slice(1).

  3. Затем отсортируем их по содержимому в первом <td> (по имени).

  4. Теперь вставим узлы в правильном порядке .append(...sortedRows).

    Таблицы всегда имеют неявный элемент <tbody>, поэтому нам нужно получить его и вставить в него: простой table.append(...) потерпит неудачу.

    Обратите внимание: нам не нужно их удалять, просто «вставляем их заново», они автоматически покинут старое место.

Открыть решение в песочнице.