JavaScript | Как создать HTML-таблицу из массива?

Всё будет зависеть от того, в каком виде будут приходить данные. Нужно понимать структуру данных в массиве, чтобы правильно написать функцию-обработчик.

Рассмотрим случай, когда первый элемент массива является заголовками столбцов таблицы, а все остальные элементы являются строками.

var massiv = [
   ["Фамилия", "Имя", "Отчество"],
   ["Иванов", "Иван", "Иванович"],
   ["Петров", "Пётр", "Петрович"],
   ["Владимиров", "Владимир", "Владимирович"]
]

Функция для создания HTML-таблицы из массива

Функция принимает массив, состоящий из массивов. Функция возвращает строку — HTML-разметку таблицы, созданной из массива:

var tablicza = function (arr) {
   var head = arr[0].map(i=>`<th>${i}</th>`).join("");
   var thead = `<thead><tr>${head}</tr></thead>`;
   var body = arr.slice(1).map(i=>`<tr>${i.map(i=>`<th>${i}</th>`).join("")}</tr>`).join("");
   var tbody = `<tbody>${body}</tbody>`;
   var table = `<table>${thead}${tbody}</table>`;
   return table;
}

То самое покороче

var tablicza = function (arr) {
   var thead = `<thead>${arr[0].map(i=>`<th>${i}</th>`).join("")}</thead>`;
   var tbody = `<tbody>${arr.slice(1).map(i=>`<tr>${i.map(i=>`<th>${i}</th>`).join("")}</tr>`).join("")}</tbody>`;
   var table = `<table>${thead}${tbody}</table>`;
   return table;
}

То же самое в минимальном варианте

var tablicza = function (arr) {
   return `<table><thead><tr>${arr[0].map(i=>`<th>${i}</th>`).join("")}</tr></thead><tbody>${arr.slice(1).map(i=>`<tr>${i.map(i=>`<th>${i}</th>`).join("")}</tr>`).join("")}</tbody></table>`;
}

1

Вызов функции с массивом

Чтобы получить строку с разметкой таблицы, нужно вызвать команду:

tablicza(massiv)
Создали строку с HTML-разметкой таблицы - JavaScript
Создали строку с HTML-разметкой таблицы — JavaScript

Вывод таблицы в текущий документ.

document.write(tablicza(massiv))
Вывели таблицу в документ - JavaScript
Вывели таблицу в документ — JavaScript

Разметка таблицы в браузере

Разметка таблицы в браузере - HTML
Разметка таблицы в браузере — HTML

 

Информационные ссылки

JavaScript | Массивы (Array)

Стандарт ECMAScript — Раздел «Array.prototype.map ( callbackfn [ , thisArg ] )» — https://tc39.es/ecma262/#sec-array.prototype.map

Стандарт ECMAScript — Раздел «Array.prototype.slice ( start, end )» — https://tc39.es/ecma262/#sec-array.prototype.slice

Поделись записью