JavaScript'te HTML Tabloları Oluşturmak için Fonksiyon

Şimdi createTable fonksiyonunu yapalım, bu fonksiyon belirtilen boyutta bir tablo oluşturup onu belirtilen elementin sonuna ekleyecek.

Fonksiyonumuz ilk parametre olarak satır sayısını, ikinci parametre olarak sütun sayısını, üçüncü parametre olarak da tablomuzun içinde oluşturulacağı DOM elementinin referansını alsın.

Tasarladığımız fonksiyon oluşturulduğunda onunla nasıl çalışacağımıza bir bakalım. Örneğin, bize şöyle bir div verildiğini varsayalım:

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

Bu div'in içinde 3'e 4'lük bir tablo yapalım:

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

Şimdi bize iki div verildiğini varsayalım:

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

Bu div'lerin her birinde kendi tablomuzu yapalım:

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

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

Oluşturulan tabloların hemen görülebilmesi için biraz CSS ekleyebiliriz, örneğin şöyle:

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

İşte tanımlanan fonksiyonun taslağı:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// burada rows satır ve cols sütundan oluşan tabloyu oluşturacağız
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Yukarıda sunulan fonksiyon taslağının kodunu tamamlayın. Hazır fonksiyonun çalışmasını test edin.