Создавање 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.

Модифицирајте ја претходната задача така што во табелата да се запишуваат не елементите, туку квадратите на тие елементи.