JavaScriptda HTML jadvallarni yaratish uchun funksiya

Keling endi createTable funksiyasini yarataylik, bu funksiya berilgan o‘lchamdagi jadvalni yaratadi va uni berilgan elementning oxiriga qo‘shadi.

Funksiyamizning birinchi parametri qatorlar soni, ikkinchi parametri ustunlar soni, uchinchisi esa ichida jadval yaratiladigan DOM elementiga havola bo‘lsin.

Keling, funksiya yaratilgandan keyin undan qanday foydalanamiz, buni ko‘rib chiqaylik. Misol tariqasida, bizga quyidagi div berilgan bo‘lsin:

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

Keling, ushbu div ichida 3 dan 4 o‘lchamli jadval yarataylik:

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

Endi esa bizga ikkita div berilgan bo‘lsin:

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

Keling, ushbu divlarning har biriga o‘zimizning jadvalimizni yarataylik:

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

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

Yaratilayotgan jadvallarni darhol ko‘rish uchun, qandaydir CSS qo‘shish mumkin, masalan, quyidagicha:

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

Mana tavsiflangan funksiyaning tayyorgarlik shakli:

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// bu yerda rows qator va cols ustunli jadval yaratamiz
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

Yuqorida keltirilgan tayyorgarlik funksiyasining kodini to‘ldiring. Tayyor funksiyaning ishlashini sinab ko‘ring.