Funktio HTML-taulukoiden luomiseksi JavaScriptillä

Tehdään nyt funktio createTable, joka luo taulukon annetun koon ja lisää sen annetun elementin loppuun.

Olkoon ensimmäinen parametrimme funktiolle rivien määrä, toinen parametri - sarakkeiden määrä, ja kolmas - viite DOM-elementtiin, jonka sisälle taulukkomme luodaan.

Katsotaan, kuinka käytämme kuvattua funktiota, kun se on luotu. Olkoon esimerkiksi meille annettu tällainen div:

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

Tehdään tämän divin sisälle taulukko 3 x 4:

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

Olkoon nyt meille annettu kaksi diviä:

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

Tehdään oma taulukkomme kumpaankin näistä diveistä:

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

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

Jotta luotavat taulukot olisivat heti näkyvissä, voidaan lisätä jotain CSS:ää, esimerkiksi tällaista:

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

Tässä on kuvatun funktion pohja:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// tässä luodaan taulukko, jossa on rows riviä ja cols saraketta
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Täydennä yllä olevan funktiomallin koodi. Testaa valmiin funktion toimintaa.