Використання масивів для зберігання даних є зручним і ефективним способом організації інформації. Однак, щоб представити масив у зручній для читання формі для користувачів, ми часто використовуємо таблицю HTML. За допомогою JavaScript ми можемо динамічно створювати та заповнювати таблиці на основі масивів даних.
Для кожного елемента масиву ми створюємо рядок таблиці , за допомогою функції document.createElement (), а потім додаємо його в таблицю за допомогою методу appendChild (). Усередині кожного рядка ми додаємо клітинку таблиці для кожного значення в масиві. Потім ми заповнюємо кожну клітинку значеннями з масиву за допомогою текстового вмісту елемента innerText. Після завершення цього циклу, наш масив буде успішно виведений в таблицю HTML!
JavaScript пропонує зручний спосіб відображення масиву як таблиці на сторінці HTML. Для цього потрібно використовувати цикли і методи для роботи з елементами масиву і створення HTML-елементів.
Давайте розглянемо простий приклад коду:
// Исходный массивvar arr = ["Яблоко", "Груша", "Апельсин"];// Получение ссылки на элемент-контейнер, в котором будет расположена таблицаvar container = document.getElementById("table-container");// Создание таблицыvar table = document.createElement("table");// Проход по каждому элементу массиваfor (var i = 0; i < arr.length; i++) // Добавление таблицы в контейнерcontainer.appendChild(table);В результаті виконання цього коду в елементі з ідентифікатором "table-container" буде відображена таблиця з елементами масиву, кожен з яких розташований в окремому рядку.
Підготовка даних
Перед тим як вивести масив в таблицю HTML за допомогою JavaScript, необхідно правильно підготувати дані. Для цього варто переконатися, що у вас є масив, який містить потрібні дані для таблиці.
Масив може містити будь-які типи даних: числа, рядки, логічні значення і навіть інші масиви. Важливо переконатися, що дані в масиві структуровані таким чином, щоб вони могли бути легко представлені у вигляді таблиці.
Створення таблиці
Приклад створення простої таблиці:
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
В даному прикладі створюється таблиця з двома рядками і двома осередками в кожній. Кожна клітинка містить текст.
Також можна додати заголовки для стовпців таблиці за допомогою тегу . У цьому випадку заголовок буде відображатися виділеним жирним шрифтом.
Заголовок 1 Заголовок 2 Ячейка 1 Ячейка 2
У цьому прикладі перший рядок таблиці містить заголовки стовпців.
Додавання заголовків
Для більш зручного відображення таблиці в HTML можна додати заголовки для кожного стовпця. Заголовки допоможуть орієнтуватися в даних і легше розуміти вміст кожного стовпця.
Заповнення даними
Для заповнення таблиці даними з масиву в JavaScript, потрібно пройтися по кожному елементу масиву і додати їх в таблицю. Для цього можна використовувати цикли або методи масиву.
Нижче наведено приклад використання циклу для заповнення таблиці даними:
// Получаем ссылку на таблицуvar table = document.getElementById("myTable");// Создаем цикл для прохода по каждому элементу массиваfor (var i = 0; i < data.length; i++) Таким чином, пройшовшись по кожному елементу масиву і додавши дані у відповідні комірки таблиці, ми заповнюємо таблицю даними.
Якщо у вас є можливість використовувати бібліотеки JavaScript, такі як jQuery або React, то можна скористатися їх методами для більш зручного заповнення таблиці даними.
Стилізація таблиці
Для поліпшення зовнішнього вигляду таблиці, ми можемо застосувати стилізацію за допомогою CSS. Це дозволяє змінити колірну схему, ширину меж, додати фонові зображення і багато іншого.
Стилізація таблиці здійснюється за допомогою селекторів CSS. Можна застосовувати стилі до всієї таблиці, окремих осередків, рядів або стовпців.
Приклад стилізації таблиці:
table th, td th tr:nth-child(even) tr:hover В даному прикладі ми встановили наступні стилі:
- Таблиця розтягується на 100% ширини екрану і має межі, які зливаються в одну;
- Заголовки стовпців та клітинки мають чорні межі та внутрішній відступ;
- Заголовки стовпців мають сірий фон;
- Парні ряди таблиці мають світлий фон, а при наведенні покажчика миші-темніше;
Застосування стилів до таблиці допоможе зробити її більш привабливою і поліпшити її візуальне уявлення.
Додавання таблиці на сторінку
Для додавання таблиці на веб-сторінку можна використовувати елемент
. Цей елемент створює таблицю з комірками, які можна заповнювати різними даними.
слід використовувати інші елементи для опису вмісту таблиці. Наприклад, елемент створює рядок таблиці, а елемент
Нижче наведено приклад HTML-коду, який створює таблицю з двома рядками та трьома клітинками:
| Осередок 1 | Осередок 2 | Осередок 3 |
| Осередок 4 | Осередок 5 | Осередок 6 |
Щоб відобразити цю таблицю на веб-сторінці, вставте цей код у потрібне місце документа HTML.
Результат виглядає наступним чином:
| Осередок 1 | Осередок 2 | Осередок 3 |
| Осередок 4 | Осередок 5 | Осередок 6 |