Kazi ya Kuunda Majedwali ya HTML kwa JavaScript

Hebu sasa tutengeneze kazi createTable, ambayo itaunda jedwali la ukubwa maalum na kuiongeza mwisho wa kipengee kilichopewa.

Hebu paramu ya kwanza ya kazi yetu ichukue idadi ya safu mlalo, paramu ya pili - idadi ya safu wima, na ya tatu - kiungo cha kipengee cha DOM, ndani ambayo jedwali letu litaundwa.

Hebu tuone jinsi tutakavyotumia kazi iliyoelezwa, itakapokuwa imeundwa. Hebu, kwa mfano, tunayo divi iliyopewa kama hii:

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

Hebu tuunde jedwali ndani ya divi hii 3 kwa 4:

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

Hebu sasa tunayo divi mbili zilizopewa:

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

Hebu tutengeneze jedwali letu wenyewe katika kila moja ya hizi divi:

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

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

Ili majedwali yanayoundwa yaonekane mara moja , unaweza kuongeza CSS yoyote, kwa mfano, kama hii:

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

Hapa hapa kazi iliyoelezwa:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// hapa tutaunda jedwali lenye safu mlalo 'rows' na safu wima 'cols'
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Kamili msimbo wa kazi ulioonyeshwa hapo juu. Jaribu utendaji kazi wa kazi iliyokamilika.