Funksie om HTML-tabelle in JavaScript te skep

Laat ons nou 'n funksie createTable maak, wat 'n tabel van 'n gespesifiseerde grootte sal skep en dit aan die einde van 'n gespesifiseerde element sal voeg.

Laat die eerste parameter van ons funksie die aantal rye wees, die tweede parameter - die aantal kolomme, en die derde - 'n verwysing na die DOM element, binne waar ons tabel geskep sal word.

Kom ons kyk hoe ons die beskryfde funksie sal gebruik wanneer dit geskep is. Laat, byvoorbeeld, ons die volgende div hê:

<div id="elem"></div>

Laat ons 'n tabel binne hierdie div maak 3 by 4:

let div = document.querySelector('#elem');
createTable(3, 4, div);

Laat ons nou twee divs hê:

<div id="elem1"></div>
<div id="elem2"></div>

Laat ons 'n eie tabel in elk van hierdie divs maak:

let div1 = document.querySelector('#elem1');
createTable(3, 4, div1);

let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);

Om te verseker dat die geskepte tabelle onmiddellik sigbaar is, kan jy 'n bietjie CSS byvoeg, byvoorbeeld so een:

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

Hier is die basiese struktuur van die beskryfde funksie:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// hier sal ons 'n tabel skep met rows rye en cols kolomme
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Voltooi die kode van die bogenoemde basiese funksie funksie. Toets die werking van die voltooide funksie.