Создать таблицу с помощью JavaScript

1. Различные теги, используемые для создания таблицы в HTML
2. Создать таблицу с помощью JavaScript

Язык программирования JavaScript позволяет нам создавать и управлять элементами DOM (объектной модели документа). Это дает нам гораздо больше гибкости и упрощает работу с DOM для всех, особенно если вы являетесь внутренним разработчиком.

Есть два способа добавления HTML-элементов, таких как таблицы, в HTML-документ: первый - путем добавления тега HTML-таблицы непосредственно на нашу веб-страницу HTML, а второй - путем создания всей таблицы внутри нашего кода JavaScript. Второй вариант - самый популярный способ создания и добавления таблицы в DOM.

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

Различные теги, используемые для создания таблицы в HTML

Ниже приведен список тегов, которые используются для создания таблицы в HTML.

1. table: HTML-тег table представляет всю таблицу в HTML. Это начальный тег таблицы, внутри которого будут использоваться все остальные теги, относящиеся к таблице (например, thead, tr, td и т. Д.), В зависимости от того, как вы хотите структурировать таблицу.
2. thead: thead означает заголовок таблицы. Этот тег используется для добавления заголовка к таблицам. Обычно это первая строка таблицы. Чтобы добавить данные внутрь тега thead, мы используем тег th. Если вы не хотите добавлять заголовок к своим таблицам, вы можете пропустить тег thead.
3. tbody: tbody означает тело таблицы. Этот тег представляет все тело или содержимое таблицы.
4. tfoot: tfoot обозначает нижний колонтитул таблицы. Обычно это последняя строка таблицы. Этот тег не является обязательным. Мы не так часто используем этот тег.
5. tr: tr обозначает строку таблицы. Это представляет собой всю строку таблицы. Чтобы вставить данные в таблицу внутри заголовка, тела или нижнего колонтитула таблицы, мы сначала должны создать строку, а затем внутри этой строки мы можем вставить данные с помощью тега td.
6. th: th используется только внутри тега thead. Он представляет собой единственную ячейку строки заголовка. Заголовки таблицы выделены жирным шрифтом.
7. td: td обозначает данные таблицы. Он представляет собой единственную ячейку таблицы. Он похож на th, но с той лишь разницей, что th используется только внутри тега thead, а td используется где-либо еще. Тег td можно использовать с тегами tbody и tfoot.

Если вы объедините все эти теги во вложенной форме, то есть один внутри другого, тогда таблица будет выглядеть после того, как она будет создана.

Красная рамка представляет собой всю таблицу. Внутри у нас есть 3 тега, заголовок таблицы (thead), тело таблицы (tbody) и нижний колонтитул таблицы (tfoot), которые представлены зеленой рамкой. Чтобы вставить данные в эти три тега, сначала нужно создать строку с помощью тега tr. Эта строка обозначена желтой рамкой. Затем, чтобы вставить данные в заголовок таблицы, мы используем тег th, а для вставки данных в тело таблицы или нижний колонтитул таблицы мы используем теги td. Обозначается серым цветом.

Создать таблицу с помощью JavaScript

Чтобы создать элемент HTML с помощью JavaScript, мы должны использовать метод под названием document.createElement(), который принимает имя тега, которое является строкой в ​​качестве параметра. Например, мы хотим создать таблицу, поэтому передадим строку table в качестве входных данных в метод createElement() document.createElement('table').

Давайте теперь создадим приведенную ниже таблицу, полностью используя JavaScript.

В приведенной выше таблице 4 строки. Первая строка содержит весь заголовок, а следующие три строки содержат данные.

Ниже у нас есть код HTML, CSS и JS. Внутри нашего тега body у нас изначально ничего нет. Мы создадим нашу таблицу внутри JavaScript, и в конце мы добавим всю таблицу в тег body, чтобы она была видна на веб-странице. Внутри тега style мы придали нашей таблице базовый стиль.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        th, td{
            padding: 10px 20px;
            border: 1px solid #000;
        }
    </style>

</head>
<body id="body">

    <script src="script.js"></script>  
</body>
</html>

Чтобы создать таблицу, сначала создадим тег table. Затем мы сохраним этот тег в переменной table, чтобы потом использовать. Таким же образом мы создадим теги thead и tbody и сохраним их внутри переменных. Затем мы добавляем thead и tbody к тегу table.

let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

table.appendChild(thead);
table.appendChild(tbody);

// Adding the entire table to the body tag
document.getElementById('body').appendChild(table);

Вы должны добавить или добавить ту таблицу, которую вы создали в JavaScript, в тег body. Сначала нам нужно получить тег тела HTML, используя его id, а затем мы добавим таблицу, используя так называемый метод appendChild(). Поскольку мы уже сохранили нашу таблицу внутри переменной table, нам просто нужно добавить таблицу, которую мы создали как дочернюю, к этому элементу тела.

На данный момент так выглядит структура нашей таблицы.

Чтобы добавить строки и данные в нашу таблицу, мы создадим теги строк таблицы (tr), заголовка таблицы (th) и данных таблицы (td) с помощью метода createElement(), а затем добавить данные внутри этих элементов с помощью свойства innerHTML.

// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = "Sr. No.";
let heading_2 = document.createElement('th');
heading_2.innerHTML = "Name";
let heading_3 = document.createElement('th');
heading_3.innerHTML = "Company";

row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
thead.appendChild(row_1);


// Creating and adding data to second row of the table
let row_2 = document.createElement('tr');
let row_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = "1.";
let row_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML = "James Clerk";
let row_2_data_3 = document.createElement('td');
row_2_data_3.innerHTML = "Netflix";

row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
row_2.appendChild(row_2_data_3);
tbody.appendChild(row_2);


// Creating and adding data to third row of the table
let row_3 = document.createElement('tr');
let row_3_data_1 = document.createElement('td');
row_3_data_1.innerHTML = "2.";
let row_3_data_2 = document.createElement('td');
row_3_data_2.innerHTML = "Adam White";
let row_3_data_3 = document.createElement('td');
row_3_data_3.innerHTML = "Microsoft";

row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
row_3.appendChild(row_3_data_3);
tbody.appendChild(row_3);

После вставки данных с помощью свойства innerHTML мы добавим эти данные в соответствующие строки. Например, сначала мы добавляем заголовки (например, heading_1, heading_2, heading_3) в row_1. Затем мы добавляем нашу первую строку, то есть row_1, к тегу thead в качестве дочернего элемента.

Точно так же мы создаем еще 2 строки, то есть row_2 и row_3, а затем добавляем переменные (row_2_data_1, row_2_data_2, row_2_data_3) и (row_3_data_1, row_3_data_2, row_3_data_3) соответственно к этим 2 ряда. И в конце мы добавляем эти 2 строки к тегу tbody как к дочернему.

Вот так таблица и ее структура HTML выглядят в консоли разработчика.

Слева у нас есть таблица, а справа код, созданный браузером. Вы можете настроить код js в зависимости от того, как должна выглядеть таблица. Для этого мы использовали только 3 метода JavaScript (createElement(), innerHTML, appendChild()).