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

Что нужно знать до создания HTML-таблицы силами JavaScript?

Так как мы хотим создавать таблицу в браузере, то по сути у нас есть два пути к решению задачи:

Либо мы пытаемся создать СТРОКУ, которая будет написана синтаксисом HTML и которая будет представлять из себя строковый вид таблицы в HTML-разметке.
Либо мы пытаемся создать ОБЪЕКТЫ, которые будут описывать HTML-элементы. Для объектов мы установим родственные зависимости.

У обоих вариантов есть плюсы и минусы.

Например, создать СТРОКУ проще и быстрее. Функция выглядит понятно и незамысловато. Мы просто оборачиваем нужные данные таблицы нужными HTML-тегами и склеиваем кусочки строк в одну большую строку. После этого мы используем один из сеттеров (innerHTML) на каком-то объекте HTML-элемента (div) для синтаксического анализа строки и генерации нужных JavaScript-объектов. То есть в этом случае объектная модель документа за нас производит кучу манипуляций по созданию объектов и установлению их связей между собой, одновременно производя отрисовку на самой странице.

В случае самостоятельной генерации объектов, мы вынуждены описывать логику их связей между друг другом. Сначала мы из создаём в текущем объекте документа. Потом мы их связываем. И только потом мы помещаем их на страницу.

Создание HTML-таблицы через СТРОКУ JavaScript

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

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

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>`;
}