JavaScriptда массивдан HTML таблица яратиш

Фарз қилайлик, бизда бош таблица бор:

<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 кўринишида чиқаринг.

Олдинги масалани ўзгартиринг, ҳужайраларга элементларнинг ўзи эмас, балки уларнинг квадратлари ёзилсин.