JavaScript-ով HTML աղյուսակներ ստեղծելու ֆունկցիա

Այժմ եկեք ստեղծենք createTable ֆունկցիան, որը կստեղծի տրված չափսի աղյուսակ և կավելացնի այն տրված տարրի վերջում:

Թող մեր ֆունկցիայի առաջին պարամետրը լինի տողերի քանակը, երկրորդ պարամետրը՝ սյուների քանակը, իսկ երրորդը՝ DOM տարրի հղումը, որի ներսում կստեղծվի մեր աղյուսակը:

Եկեք տեսնենք, թե ինչպես ենք օգտագործելու նկարագրված ֆունկցիան, երբ այն ստեղծվի: Ենթադրենք, օրինակ, մեզ տրված է այսպիսի div:

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

Եկեք այս div-ի ներսում ստեղծենք 3 x 4 աղյուսակ:

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

Ենթադրենք, այժմ մեզ տրված են երկու div:

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

Եկեք յուրաքանչյուր div-ի համար ստեղծենք մեր սեփական աղյուսակը:

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

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

Որպեսզի ստեղծվող աղյուսակները անմիջապես տեսանելի լինեն, կարող եք ավելացնել CSS, օրինակ, այսպիսին.

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

Ահա նկարագրված ֆունկցիայի կաղապարը.

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// այստեղ կստեղծենք rows տողերով և cols սյուներով աղյուսակ
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Լրացրեք վերը ներկայացված ֆունկցիայի կոդը: Փորձարկեք պատրաստի ֆունկցիայի աշխատանքը: