Tabelle mit JavaScript erstellen

1. Verschiedene Tags zum Erstellen einer Tabelle in HTML
2. Erstellen Sie eine Tabelle mit JavaScript

Die Programmiersprache JavaScript ermöglicht es uns, DOM-Elemente (Document Object Model) zu erstellen und zu bearbeiten. Es gibt uns viel mehr Flexibilität und macht es für jeden viel einfacher, mit DOM zu arbeiten, insbesondere wenn Sie ein Backend-Entwickler sind.

Es gibt zwei Möglichkeiten, HTML-Elemente wie Tabellen zu einem HTML-Dokument hinzuzufügen. Erstens, indem Sie das HTML-Tabellen-Tag direkt in unsere HTML-Webseite einfügen, und zweitens durch Erstellen der gesamten Tabelle in unserem JavaScript-Code. Die zweite Option ist die beliebteste Methode zum Erstellen und Hinzufügen der Tabelle zum DOM.

Bevor wir uns jedoch eingehend damit befassen, wie die Tabelle mit JavaScript erstellt wird, wollen wir zunächst die verschiedenen Tabellen-Tags, die zum Erstellen einer Tabelle verwendet werden, visuell verstehen und was diese Tags genau bedeuten. Dadurch erhalten Sie eine visuelle Darstellung der Tabelle, sodass Sie den Codeteil später in diesem Artikel leichter verstehen können.

Verschiedene Tags zum Erstellen einer Tabelle in HTML

Unten ist die Liste der Tags, die verwendet werden, um eine Tabelle in HTML zu erstellen.

1. table: Das HTML-Tag table repräsentiert die gesamte Tabelle in HTML. Dies ist das Start-Tag der Tabelle, in dem alle anderen Tags, die sich auf die Tabelle beziehen (wie thead, tr, td usw.), verwendet werden, je nachdem, wie Sie die Tabelle strukturieren möchten.
2. thead: Das thead steht für die Tabellenüberschrift. Dieses Tag wird verwendet, um den Tabellen Überschriften hinzuzufügen. Es stellt normalerweise die erste Zeile der Tabelle dar. Um Daten innerhalb des thead-Tags hinzuzufügen, verwenden wir das th-Tag. Wenn Sie Ihren Tabellen keine Überschrift hinzufügen möchten, können Sie das Tag thead überspringen.
3. tbody: Das tbody steht für Tabellenkörper. Dieses Tag repräsentiert den gesamten Textkörper oder den Inhalt der Tabelle.
4. tfoot: Das tfoot steht für Tabellenfuß. Es stellt normalerweise die letzte Zeile der Tabelle dar. Dieses Tag ist optional. Wir verwenden dieses Tag nicht so oft.
5. tr: Das tr steht für Tabellenzeile. Dies repräsentiert die gesamte Zeile der Tabelle. Um Daten in die Tabelle entweder innerhalb der Kopf-, Haupt- oder Fußzeile der Tabelle einzufügen, müssen wir zuerst eine Zeile erstellen und dann innerhalb dieser Zeile die Daten mit Hilfe des td-Tags einfügen.
6. th: Das th wird nur innerhalb des thead-Tags verwendet. Es stellt die einzelne Zelle der Überschriftszeile dar. Es macht die Überschriften der Tabelle fett.
7. td: Das td steht für Tabellendaten. Es repräsentiert die einzelne Zelle der Tabelle. Es ähnelt th, aber der einzige Unterschied besteht darin, dass th nur innerhalb des thead-Tags verwendet wird und td an anderer Stelle verwendet wird. Das Tag td kann mit den Tags tbody und tfoot verwendet werden.

Wenn Sie alle diese Tags in verschachtelter Form, also ineinander, kombinieren, dann sieht die Tabelle so aus, nachdem sie erstellt wurde.

Der rote Rahmen repräsentiert die gesamte Tabelle. Darin befinden sich 3 Tags, Tabellenkopf (thead), Tabellenkörper (tbody) und Tabellenfuß (tfoot), die durch den grünen Rahmen dargestellt werden. Um Daten in diese drei Tags einzufügen, müssen wir zunächst mit Hilfe des Tags tr eine Zeile erstellen. Diese Zeile wird durch den gelben Rahmen dargestellt. Um Daten in den Tabellenkopf einzufügen, verwenden wir das Tag th, und um Daten in den Tabellenkörper oder den Tabellenfuß einzufügen, verwenden wir die Tags td. Es wird mit Hilfe der grauen Farbe angezeigt.

Erstellen Sie eine Tabelle mit JavaScript

Um ein HTML-Element mit JavaScript zu erstellen, müssen wir eine Methode namens document.createElement() verwenden, die den Tag-Namen, der ein String ist, als Parameter verwendet. Wenn wir zum Beispiel eine Tabelle erstellen möchten, übergeben wir den String table als Eingabe an die Methode createElement() document.createElement('table').

Lassen Sie uns nun die folgende Tabelle vollständig mit JavaScript erstellen.

Die obige Tabelle hat 4 Zeilen. Die erste Zeile enthält alle Überschriften und die nächsten drei Zeilen enthalten die Daten.

Unten haben wir den HTML-, CSS- und JS-Code. In unserem body-Tag haben wir zunächst nichts. Wir erstellen unsere Tabelle im JavaScript und hängen am Ende die gesamte Tabelle an das Tag body an, damit sie auf der Webseite sichtbar ist. Innerhalb des style-Tags haben wir unserem Tisch einige grundlegende Stylings gegeben.

<!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>

Um eine Tabelle zu erstellen, erstellen wir zunächst das Tag table. Dann speichern wir dieses Tag in einer Variablen Tabelle, damit wir es später verwenden können. Auf die gleiche Weise erstellen wir auch die Tags thead und tbody und speichern sie in den Variablen. Dann hängen wir thead und tbody an das table-Tag an.

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);

Sie müssen diese Tabelle, die Sie in JavaScript erstellt haben, an das Tag body anhängen oder hinzufügen. Wir müssen zuerst das HTML-Body-Tag mit seiner id abrufen, und dann werden wir die Tabelle mit der Methode appendChild() anhängen. Da wir unsere Tabelle bereits in der Variablen table gespeichert haben, müssen wir nur noch die Tabelle, die wir als Kind erstellt haben, an dieses Body-Element anhängen.

An dieser Stelle sieht der Aufbau unserer Tabelle so aus.

Um unserer Tabelle Zeilen und Daten hinzuzufügen, erstellen wir Tabellenzeilen (tr), Tabellenüberschriften (th) und Tabellendaten (td)-Tags mit der Methode createElement(), und dann werden wir Fügen Sie die Daten innerhalb dieser Elemente mit Hilfe der Eigenschaft innerHTML hinzu.

// 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);

Nach dem Einfügen der Daten mit der Eigenschaft innerHTML werden wir diese Daten an die entsprechenden Zeilen anhängen. Zum Beispiel fügen wir zuerst die Überschriften (d. h. heading_1, heading_2, heading_3) zu row_1 hinzu. Und dann hängen wir unsere erste Zeile, also row_1, als Kind an das thead-Tag an.

Auf ähnliche Weise erstellen wir weitere 2 Zeilen, dh row_2 und row_3 und fügen dann die Variablen (row_2_data_1, row_2_data_2, row_2_data_3) und (row_3_data_1, row_3_data_2, row_3_data_3) jeweils an diese an 2 Reihen. Und am Ende fügen wir diese 2 Zeilen an das Tag tbody an, da es sich um Kinder handelt.

So sieht nun die Tabelle und ihre HTML-Struktur in der Entwicklerkonsole aus.

Links haben wir die Tabelle und rechts den vom Browser generierten Code. Sie können den js-Code basierend darauf anpassen, wie die Tabelle aussehen soll. Um dies zu erreichen, haben wir nur 3 JavaScript-Methoden (createElement(), innerHTML, appendChild()) verwendet.