Die Webentwicklung ist einer der gefragtesten und vielversprechendsten Bereiche in der Informationstechnologie. In der heutigen Welt hat fast jedes Unternehmen oder jede einzelne Person eine eigene Website. Das Erlernen verschiedener Programmiersprachen wie HTML, CSS und Javascript ist ein wichtiger Bestandteil der qualitativ hochwertigen Website-Entwicklung.
Es gibt mehrere Möglichkeiten, Tabellen mit Javascript zu erstellen. Eine der häufigsten und einfachsten Methoden besteht darin, DOM-Methoden zu verwenden, um Tabellenelemente zu erstellen und sie mit Daten zu füllen. Mit Methoden createElement und appendChild sie können Tags erstellen und diese dann mit Text oder anderen Elementen füllen.
Erstellen einer Tabelle in HTML mit Javascript
Eine der gängigsten Methoden zum Erstellen einer Tabelle mit Javascript ist die Verwendung der Methoden createElement und appendChild . Es folgt ein Codebeispiel, mit dem Sie eine Tabelle mit zwei Zeilen und drei Spalten erstellen können:
// Создаем элемент таблицыvar table = document.createElement("table");// Создаем строкиfor (var i = 0; i < 2; i++) // Добавляем строки в таблицуtable.appendChild(row);>// Добавляем таблицу на страницуdocument.body.appendChild(table);In diesem Beispiel erstellen wir eine Tabelle mit zwei Zeilen und drei Spalten. Wir verwenden for - Schleifen , um die richtige Anzahl von Zeilen und Spalten zu erstellen. Dann erstellen wir td-Elemente für jede Tabellenzelle und fügen jeder Zelle Text hinzu. Schließlich fügen wir der Tabelle und der Tabelle der Seite Zeilen hinzu.
Auf diese Weise können Sie mit Javascript Tabellen einfach in HTML erstellen, wodurch die Anzeige der Daten flexibel und dynamisch wird.
Verbinden einer Javascript-Datei mit HTML
Um einer HTML-Seite Javascript-Funktionalität hinzuzufügen, müssen Sie die entsprechende Datei mit der Erweiterung anhängen.js. Dies kann mit einem Tag erfolgen, das allgemein zum Verbinden externer Skripts verwendet wird.
So sieht ein Beispiel für eine Skriptverbindung aus:
In diesem Beispiel wird eine Datei mit dem Namen script angezeigt.js muss sich im selben Verzeichnis wie die HTML-Seite befinden. Sie können auch den vollständigen Pfad zu einer Datei angeben, wenn sie sich an anderer Stelle auf dem Server befindet.
Jetzt können Sie Funktionen und Variablen aus einer Script-Datei verwenden.js in Ihrem HTML-Code.
Beachten Sie, dass die Reihenfolge der Skripterstellung wichtig ist. Wenn Ihr Skript von anderen Skripten abhängt, stellen Sie sicher, dass sie vor ihm verbunden sind.
Erstellen eines Elements
Das Erstellen eines Elements in JavaScript erfolgt mithilfe einer Methode createElement Objekts document. Mit dieser Methode können Sie ein neues HTML-Element innerhalb eines Dokuments erstellen.
Um beispielsweise einen neuen Absatz zu erstellen, können wir den folgenden Code verwenden:
var p = document.createElement("p");
Hier ist die Variable p enthält ein neues Element p.
Wir können auch Elementattribute festlegen und Textinhalte hinzufügen. Zum Beispiel können wir ein Klassenattribut festlegen und Text hinzufügen:
p.setAttribute("class", "my-paragraph"); p.textContent = "Beispieltext in einem Absatz";
In diesem Beispiel legen wir die Elementklasse mit einer Methode fest setAttribute und fügen Sie Text mit der Eigenschaft hinzu textContent.
Sobald das Element erstellt wurde, können wir es der Seite hinzufügen. Fügen Sie beispielsweise den erstellten Absatz in das Element mit der ID "container" ein:
var container = document.getElementById("container"); container.appendChild(p);
Hier ist die Methode getElementById ermöglicht den Zugriff auf das Element mit der angegebenen ID und die Methode appendChild fügt das erstellte Element innerhalb des übergeordneten Elements hinzu.
Das Erstellen eines Elements in JavaScript bedeutet also, ein neues HTML-Element zu erstellen, seine Attribute und den Textinhalt festzulegen und es dann zur Seite hinzuzufügen.
Hinzufügen eines Tabellenkopfes
Um einen Tabellenkopf in HTML-Markup mit JavaScript hinzuzufügen, können wir ein Element verwenden .
Beispiel für die Verwendung eines Elements zum Hinzufügen eines Tabellenkopfes:
Заголовок таблицы Im obigen Beispiel ist "Tabellenkopf" der Text, der als Tabellenkopf angezeigt wird.
Das Hinzufügen eines Tabellenkopfes kann die Verfügbarkeit und Organisation von Informationen in einer Tabelle verbessern, indem es Benutzern hilft, den Inhalt und die Struktur der Tabelle zu verstehen.
Hinzufügen von Zeilen und Zellen zu einer Tabelle
Sie können verschiedene Methoden verwenden, um Zeilen und Zellen einer Tabelle mit JavaScript hinzuzufügen.
Beispiel für die Verwendung der insertRow() -Methode :
let table = document.getElementById('myTable'); // получение ссылки на таблицуlet row = table.insertRow(); // добавление новой строкиlet cell1 = row.insertCell(); // добавление новой ячейкиcell1.innerHTML = "Новая ячейка"; // заполнение содержимого ячейкиlet cell2 = row.insertCell();cell2.innerHTML = "Еще одна новая ячейка";Mit der insertCell() -Methode können Sie einer angegebenen Zeile eine neue Zelle hinzufügen. Nachdem die Zelle erstellt wurde, kann der Inhalt der Zelle mit der innerHTML-Eigenschaft gefüllt werden.
Mit einer Kombination aus insertRow() und insertCell() -Methoden können Sie der Tabelle neue Zeilen und Zellen hinzufügen.
Hinzufügen von Stilen zu einer Tabelle und ihren Elementen
Um das Aussehen einer Tabelle mithilfe von JavaScript zu ändern, können Sie Methoden verwenden, um den Tabellenelementen Stile oder Klassen hinzuzufügen.
Um beispielsweise eine Hintergrundfarbe für eine gesamte Tabelle festzulegen, können Sie den folgenden Code verwenden:
- var table = document.getElementById("myTable");
- table.style.backgroundColor = "lightgray";
Und Sie können den Stil einer einzelnen Tabellenzelle mithilfe des folgenden Codes ändern:
- var cell = document.getElementById("myCell");
- cell.style.border = "1px solid black";
Sie können den Tabellenelementen auch eine Klasse hinzufügen, indem Sie die classList-Methode verwenden.add() :
- var row = document.getElementById("myRow");
- row.classList.add("highlight");
Oder Sie können das class-Attribut für Tabellenelemente verwenden:
Sie können jedoch Stile für die Highlight-Klasse in CSS definieren:
Mit JavaScript können Sie der Tabelle und ihren Elementen leicht Stile hinzufügen, um ihr Aussehen zu ändern.
Behandeln von Ereignissen beim Klicken auf eine Zelle
In einer Handlerfunktion können Sie jede Logik für die Interaktion mit einer Tabelle implementieren. Sie können beispielsweise den Zellenwert ändern, Klassen oder Stile hinzufügen, um eine Zelle hervorzuheben, oder je nach Inhalt der Zelle andere Aktionen ausführen.
Beispiel für die Funktionsweise von Ereignissen, wenn Sie auf eine Tabellenzelle klicken:
// Получаем элементы ячеек таблицыvar cells = document.getElementsByTagName("td");// Перебираем все ячейки и добавляем обработчик события на кликfor (var i = 0; i < cells.length; i++) );>
Auf diese Weise können Sie mit JavaScript die Ereignisbehandlung einfach hinzufügen, wenn Sie auf eine Tabellenzelle klicken und je nach Bedarf unterschiedliche Arbeitslogik für die Tabelle implementieren. Indem Sie dem Benutzer die Möglichkeit geben, mit der Tabelle zu interagieren, erstellen Sie eine interaktive und funktionellere Seite.
Bearbeiten des Inhalts von Tabellenzellen
Neben der Anzeige von Daten können Benutzer mit Tabellen auch den Inhalt von Zellen bearbeiten. Sie können JavaScript verwenden, um dies zu tun.
Zunächst müssen Sie jeder Zelle in der Tabelle eine eindeutige ID zuweisen, um sie mithilfe von JavaScript zu identifizieren. Zum Beispiel:
Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Sie können dann JavaScript verwenden, um den Inhalt dieser Zellen zu ändern. Um beispielsweise den Inhalt einer Zelle mit der ID "cell1" zu ändern, können Sie den folgenden Code verwenden:
const cell1 = document.getElementById('cell1');cell1.innerHTML = 'Новое содержимое';Wenn dieser Code ausgeführt wird, wird der Text in der Zelle mit der ID "cell1" durch "Neuer Inhalt" ersetzt. Auf ähnliche Weise können Sie den Inhalt der übrigen Zellen ändern.
Löschen von Tabellenzeilen und -spalten
JavaScript bietet die Möglichkeit, der Tabelle mithilfe von DOM-Methoden eine Funktion zum Löschen von Zeilen und Spalten hinzuzufügen. Dies kann beispielsweise nützlich sein, wenn Sie nicht benötigte Daten löschen oder nur bestimmte Teile einer Tabelle anzeigen möchten.
var row = document.getElementById("rowId");row.remove();var table = document.getElementById("tableId");var columnIndex = 1; // индекс столбца, который нужно удалитьvar rows = table.rows;for (var i = 0; i
Nachdem Sie diese Vorgänge ausgeführt haben, werden die ausgewählten Zeilen oder Spalten aus der Tabelle entfernt.
Hinzufügen einer Tabelle zu einer Webseite
In HTML wird ein Tag verwendet, um einer Webseite eine Tabelle hinzuzufügen. Dieses Tag erstellt einen Container für die Tabelle, und dann fügen wir Zeilen und Zellen mit anderen Tags hinzu.
Jede Tabellenzeile wird mit einem Tag erstellt . Innerhalb dieses Tags müssen Sie den Inhalt jeder Tabellenzelle mithilfe eines Tags angeben. Auf diese Weise wird jede Zelle innerhalb des Tags und jede Zeile innerhalb des Tags enthalten sein .
Beispielcode zum Erstellen einer Tabelle mit zwei Zeilen und zwei Spalten:
Ячейка 1, строка 1 Ячейка 2, строка 1 Ячейка 1, строка 2 Ячейка 2, строка 2
In diesem Beispiel enthält die Tabelle zwei Zeilen und zwei Spalten. Jede Zelle enthält ihren Inhalt.
Beachten Sie, dass die Tabelle keine Umrandungen und Darstellungsstile aufweist. Sie müssen CSS verwenden, um das Aussehen einer Tabelle zu ändern.
