Сохтани ҷадвали HTML аз массива дар JavaScript

Бигзор мо як ҷадвали холӣ дошта бошем:

<table id="table"></table>

Бигзор инчунин ба мо як массиви дученақша дода шудааст, масалан, чунин:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];

Биёед, асоси ин массив ҷадвали HTML созем, ки бо элементҳои ин массив пур карда шудааст. Яъне мо ҷадвалеро бо се сатр ҳосил мекунем, ки дар ҳар яки онҳо 4 ҷаъба (ячейка) вуҷуд дорад.

Масъаларо бо ёрии ду сикли лонашудаи for-of ҳал мекунем:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
let table = document.querySelector('#table');

for (let subArr of arr) {
	let tr = document.createElement('tr');
	
	for (let elem of subArr) {
		let td = document.createElement('td');
		td.textContent = elem;
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

Чунонки мебинед, ҳалли мо умумӣ гардид ва аз миқдори зермассивҳо ва миқдори элементҳо дар ҳар як зермассив вобаста нест. Як шароит - ки дар зермассивҳо миқдори якхелаи элементҳо бошад.

Массив дода шудааст:

let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]];

Бе нигаристан ба қисми назариявии дарс, элементҳои массиви додашударо ба шакли ҷадвали HTML table бароред.

Масъалаи қаблиро тағйир диҳед, то ки дар ҷадвал элементҳо набуда, балки квадратҳои ин элементҳо сабт карда шаванд.