Funktion til at oprette HTML-tabeller i JavaScript

Lad os nu lave funktionen createTable, som vil oprette en tabel med en given størrelse og tilføje den til slutningen af et givet element.

Lad vores funktion tage antallet af rækker som første parameter, antallet af kolonner som anden parameter, og en reference til DOM-elementet som tredje parameter, inde i hvilket vores tabel vil blive oprettet.

Lad os se på, hvordan vi vil bruge den beskrevne funktion, når den er oprettet. Lad os for eksempel sige, at vi har fået givet en div som denne:

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

Lad os lave en tabel inde i denne div 3 gange 4:

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

Lad os nu sige, at vi har fået givet to div'er:

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

Lad os lave vores egen tabel i hver af disse div'er:

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

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

For at de oprettede tabeller straks kan ses, kan vi tilføje noget CSS, for eksempel sådan her:

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

Her er skelettet til den beskrevne funktion:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// her opretter vi tabellen med rows rækker og cols kolonner
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Afslut koden i ovenstående skelettil funktionen. Test den færdige funktions virkning.