Tạo bảng HTML từ mảng trong JavaScript

Giả sử chúng ta có một bảng trống:

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

Giả sử chúng ta cũng có một mảng hai chiều, ví dụ như sau:

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

Hãy tạo một bảng HTML dựa trên mảng này, được điền bằng các phần tử của mảng đã cho. Tức là chúng ta sẽ có một bảng với ba hàng, mỗi hàng có 4 ô.

Giải quyết bài toán bằng hai vòng lặp lồng nhau 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);
}

Như bạn thấy, giải pháp của chúng ta trở nên linh hoạt và không phụ thuộc vào số lượng mảng con và số lượng phần tử trong mỗi mảng con. Điều kiện duy nhất là trong các mảng con phải có cùng số lượng phần tử.

Cho mảng:

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

Không xem phần lý thuyết của bài học, hãy xuất các phần tử của mảng đã cho dưới dạng bảng HTML table.

Hãy sửa đổi bài toán trước đó sao cho trong bảng ghi không phải là các phần tử, mà là bình phương của các phần tử đó.