Funkcija HTML tabulu izveidei ar JavaScript

Tagad izveidosim funkciju createTable, kura izveidos noteikta izmēra tabulu un pievienos to norādītā elementa beigās.

Lai mūsu funkcija pirmo parametru pieņem rindu skaitu, otro parametru - kolonnu skaitu, un trešo - atsauci uz DOM elementu, kura iekšienē tiks izveidota mūsu tabula.

Apskatīsim, kā mēs izmantosim aprakstīto funkciju, kad tā tiks izveidota. Pieņemsim, piemēram, ka mums ir dots šāds div:

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

Izveidosim šī div iekšienē tabulu 3 x 4:

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

Pieņemsim, ka mums ir doti divi divi:

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

Izveidosim savu tabulu katrā no šiem diviem:

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

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

Lai izveidotās tabulas uzreiz būtu redzamas, var pievienot kādu CSS, piemēram, šādu:

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

Šeit ir aprakstītās funkcijas sagatave:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// šeit izveidosim tabulu ar rows rindām un cols kolonnām
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Pabeidziet iepriekš parādītās funkcijas sagataves kodu. Pārbaudiet gatavās funkcijas darbību.