— — Кнопка «Добавить столбец»

  1. Кнопка добавления столбца, при нажатии активирует событие щелчка, вызывает функцию addNewColumn.
  2. addNewColumnфункция {
  • создайте объект столбца с некоторыми свойствами, которые определяют тип элемента ( th) и имя столбца — номер и т. д., и поместите этот объект в массив заголовков в объект с именем tableState.
  • Затем он вызывает функцию addCellsInEachRowForNewColumn, которая добавляет одинаковое количество объектов ячеек в каждый объект строки в массиве тела в объекте tableState.
  • Затем он вызывает функцию updateTableDataInLocalStorage, которая обновляет данные в локальном хранилище, и вызывает функцию createTableUIFromLocalStorage.

— — Кнопка «Добавить строку»

  1. кнопку добавления строки, при нажатии активируется событие щелчка, которое вызывает функцию addNewRow.
  2. addNewRowфункция {
  • создайте объект строки с некоторыми свойствами, которые определяют тип элемента ( tr), номер строки и пустой массив cellDetails для хранения сведений о каждой ячейке, и нажмите этот объект с помощью addCellsInEachColumnForNewRowвызов функции в массиве тела объекта с именем tableState.
  • Функция addCellsInEachColumnForNewRow создает объект со свойствами для каждой ячейки в каждой строке и помещает этот объект ячейки в массив cellDetails до длины массива заголовков.
  • Затем функция addNewRow вызывает функцию updateTableDataInLocalStorage, которая обновляет данные в локальном хранилище, и вызывает функцию createTableUIFromLocalStorage.

— — Создание пользовательского интерфейса таблицы из локального хранилища

Кнопка «Очистить все»: -

  1. Эта функция сначала вызывает функцию clearUI, которая очищает все данные, сохраненные в локальном хранилище, делает заголовок и тело таблицы пустыми, чтобы очистить пользовательский интерфейс, и, наконец, обновляет страницу документа.
  2. Функция createTableUIFromLocalStorage создает таблицу в пользовательском интерфейсе, используя данные, полученные из локального хранилища.

Цикл по объектам заголовка: -

  1. Выполняет итерацию по каждому объекту массива заголовков в объекте tableState, который создает элемент html свойства elementType и добавляет созданный элемент в элемент заголовка таблицы в цикле. При этом также вызывается функция createSortForm с объектом заголовка в качестве параметра.
  2. Функция createSortForm создает элемент option. Внутренний текст элемента option назначается именем столбца объекта заголовка. Затем элемент option добавляется к элементу select в html-документе.
  3. В цикле заголовка вызываются еще две функции, которые создают элемент input-text и input-search вместе с идентификатором, используя номер столбца, и добавляют его в недавно созданный -йэлемент.

Цикл по объектам Body: -

  1. Выполняет во вложенном цикле каждый объект массива columnsDetails каждого объекта массива body в объекте tableState, который создает элемент tr. Вложенный цикл выполняет итерацию по массиву columnsDetails и создает элемент td вместе с элементом textarea с идентификатором.
  2. Элемент textarea добавляется в элемент td, а элемент td добавляется в элемент tr, который образует одну строку той же длины, что и столбцы.
  3. Вне вложенного цикла каждый элемент tr добавляется в тело таблицы.

— — Сортировка по столбцу

  1. кнопку сортировки, при нажатии вызывает событие щелчка, которое вызывает функцию sortTableByColumn.
  2. Функция sortTableByColumn сохраняет значение выбранной опции и значение радиовхода в переменных соответственно с помощью атрибутов события и имени в элементе выбора и элементе радиовхода.
  3. На основе значения выбранной опции найдите и сохраните тот конкретный номер столбца, который соответствует значению имени столбца в массиве заголовков.
  4. Теперь, используя алгоритм сортировки, сравниваем два объекта сведений о столбце в массиве тела со значениями их ячеек только для этого конкретного номера столбца.
  5. Теперь массив тела в объекте tableState реструктурирован и отсортирован по выбранному номеру столбца, но еще не в пользовательском интерфейсе.
  6. Наконец, функция sortTableByColumn вызывает функцию updateTableBodyData, которая создает обновленный пользовательский интерфейс тела таблицы с использованием отсортированного массива тела данных объекта tableState.

— — Поиск по столбцу

  1. При каждом нажатии клавиши на входе поиска запускается действие, которое сохраняет текущее значение элемента поиска и извлекает данные из локального хранилища.
  2. Он сопоставляет строку текущего значения со значением в определенном номере столбца в данных локального хранилища и сохраняет объект совпадающего значения в массиве тела в tableState.
  3. Используя этот объект tableState, он вызывает функцию updateTableBodyData, которая воссоздает пользовательский интерфейс тела таблицы.

— — Перетаскивание

  1. Когда создаются элемент input и элемент textarea, им устанавливаются два атрибута.
  • Атрибуту перетаскивание присвоено значение true, которое позволяет захватывать и перетаскивать элемент/элемент.
  • Атрибут ondragstart устанавливается с анонимной функцией в качестве значения. Эта функция запускает событие каждый раз, когда элемент перетаскивается, что устанавливает данные идентификатора перетаскиваемого элемента и ключа в виде простого/текстового значения в передача данных о событии.
  1. В функции createTableUIFromLocalStorage при создании го& tdэлемента устанавливаются как зона сброса для перетаскиваемых элементов.
  2. Атрибут ondrop устанавливается для элемента th& td с анонимной функцией в качестве значения.
  • Эта функция получает идентификатор перетаскиваемого элемента из передачи данных события и сохраняет его в переменной.
  • Затем он сохраняет идентификатор элемента зоны сброса.
  • Используя это для идентификаторов (идентификатор перетаскиваемого элемента, идентификатор элемента зоны перетаскивания), имя столбца заголовка таблицы или значение ячейки тела таблицы меняются местами.
  • И, наконец, вызывает функцию updateTableDataInLocalStorage, которая затем обновляет данные в локальном хранилище и воссоздает пользовательский интерфейс таблицы с обновленными данными.