вернуться к уроку

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

важность: 5

Таблица:

Имя Фамилия Возраст
John Smith 10
Pete Brown 15
Ann Lee 5
... ... ...

Может быть больше строк.

Напишите код для сортировки по столбцу "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).

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

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

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