Penciptaan Jadual HTML daripada Array dalam JavaScript

Katakan kita mempunyai jadual kosong:

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

Katakan juga kita diberikan array dua dimensi, contohnya seperti ini:

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

Mari kita buat jadual HTML berdasarkan array ini, diisi dengan elemen array tersebut. Iaitu, kita akan mendapat jadual dengan tiga baris, setiap satu mempunyai 4 sel.

Mari selesaikan masalah ini menggunakan dua gelung for-of bersarang:

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);
}

Seperti yang anda lihat, penyelesaian kami ternyata universal dan tidak bergantung pada jumlah subarray dan jumlah elemen dalam setiap subarray. Satu-satunya syarat adalah bahawa subarray mesti mempunyai jumlah elemen yang sama.

Diberi array:

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

Tanpa merujuk bahagian teori pelajaran, tunjukkan elemen array yang diberikan dalam bentuk jadual HTML table.

Ubah suai tugas sebelumnya supaya bukan elemen yang ditulis ke dalam jadual, tetapi kuasa dua elemen tersebut.