HTML ცხრილების შექმნის ფუნქცია JavaScript-ში

ახლა კი დავწეროთ ფუნქცია createTable, რომელიც შექმნის მითითებული ზომის ცხრილს და დაამატებს მას მითითებული ელემენტის ბოლოში.

ჩვენი ფუნქცია პირველ პარამეტრად მიიღებს რიგების რაოდენობას, მეორე პარამეტრად - სვეტების რაოდენობას, ხოლო მესამედ - DOM ელემენტის მითითებას, რომლის შიგნითაც შეიქმნება ჩვენი ცხრილი.

შევხედოთ, როგორ გამოვიყენებთ აღწერილ ფუნქციას, როდესაც ის შექმნილი იქნება. მაგალითად, დავუშვათ, გვაქვს მოცემული ასეთი div:

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

მოდით, ამ div-ის შიგნით შევქმნათ ცხრილი 3 სიგრძის 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);
}

დაასრულეთ ზემოთ წარმოდგენილი შაბლონის კოდი. გამოსცადეთ მზა ფუნქციის მუშაობა.