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

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

важность: 4

Сделать сортировку таблицы при клике на заголовок.

Демо:

Требования:

  • Использовать делегирование.
  • Код не должен меняться при увеличении количества столбцов или строк.

P.S. Обратите внимание, тип столбца задан атрибутом у заголовка. Это необходимо, ведь числа сортируются иначе чем строки. Соответственно, код это может использовать.

P.P.S. Вам помогут дополнительные навигационные ссылки по таблицам.

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

Подсказка (обработчик)

  1. Обработчик onclick можно повесить один, на всю таблицу или THEAD. Он будет игнорировать клики не на TH.
  2. При клике на TH обработчик будет получать номер из TH, на котором кликнули (TH.cellIndex) и вызывать функцию sortColumn, передавая ей номер колонки и тип.
  3. Функция sortColumn(colNum, type) будет сортировать.

Подсказка (сортировка)

Функция сортировки:

  1. Переносит все TR из TBODY в массив rowsArr
  2. Сортирует массив, используя rowsArr.sort(compare), функция compare зависит от типа столбца.
  3. Добавляет TR из массива обратно в TBODY

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