Funktsioon HTML tabelite loomiseks JavaScriptis

Teeme nüüd funktsiooni createTable, mis loob etteantud suurusega tabeli ja lisab selle etteantud elemendi lõppu.

Olgu meie funktsiooni esimene parameeter ridade arv, teine parameeter - veergude arv ja kolmas - viide DOM elemendile, mille sisuks meie tabel luuakse.

Vaatame, kuidas me kirjeldatud funktsiooni kasutama hakkame, kui see on loodud. Olgu meil näiteks antud selline div:

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

Teeme selle divi sees tabeli 3 korda 4:

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

Olgu nüüd meil antud kaks divi:

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

Teeme igas neist dividest oma tabeli:

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

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

Selleks, et loodavad tabelid oleksid kohe nähtavad, võib lisada mõne CSSi, näiteks sellise:

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

Siin on kirjeldatud funktsiooni mall:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// siin loome tabeli rows rea ja cols veeruga
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Viige ülaltoodud funktsiooni mallis kood lõpuni. Testige valmis funktsiooni tööd.