Dodawanie wierszy i kolumn do tabeli HTML

Załóżmy, że mamy jakąś tabelę HTML #table. Nauczmy się dodawać do niej nowe wiersze i kolumny.

Dodawanie wierszy

Dodawanie wierszy nie stanowi problemu: trzeba utworzyć tr, a następnie uruchomić pętlę, która doda odpowiednią liczbę komórek do tego wiersza (powiedzmy 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);

Zrób przycisk, po kliknięciu którego do tabeli będzie dodawany nowy wiersz.

Dodawanie kolumn

A z dodawaniem kolumn jest nieco trudniej: trzeba uruchomić pętlę, która przejrzy wszystkie wiersze tabeli i do każdego wiersza doda nową komórkę:

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

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

Dana jest tabela o rozmiarze 2 na 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;
}

Dany jest również przycisk. Spraw, aby po naciśnięciu przycisku tabela zwiększała się o jeden wiersz i jedną kolumnę.