Hinzufügen von Zeilen und Spalten zu einer HTML-Tabelle

Nehmen wir an, wir haben eine HTML-Tabelle #table. Lassen Sie uns lernen, wie man neue Zeilen und Spalten hinzufügt.

Hinzufügen von Zeilen

Das Hinzufügen von Zeilen ist einfach: man muss ein tr erstellen und dann eine Schleife starten, die die benötigte Anzahl Zellen in diese Zeile einfügt (sagen wir 3):

let table = document.querySelector('#table');

let tr = document.createElement('tr');

for (let i = 1; i <= 3; i++) {
	let td = document.createElement('td');
	tr.appendChild(td);
}

table.appendChild(tr);

Erstellen Sie einen Button, bei dessen Klick eine neue Zeile zur Tabelle hinzugefügt wird.

Hinzufügen von Spalten

Das Hinzufügen von Spalten ist etwas komplizierter: man muss eine Schleife starten, die alle Zeilen der Tabelle durchläuft und in jede Zeile eine neue Zelle einfügt:

let trs = document.querySelectorAll('#table tr');

for (let tr of trs) {
	let td = document.createElement('td');
	tr.appendChild(td);
}

Gegeben ist eine Tabelle der Größe 2 mal 2:

<table id="table">
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

Ebenfalls gegeben ist ein Button. Sorgen Sie dafür, dass bei Klick auf den Button die Tabelle um eine Zeile und eine Spalte vergrößert wird.