JavaScript에서 배열로 HTML 테이블 만들기

비어 있는 테이블이 있다고 가정해 봅시다:

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

또한 다음과 같은 2차원 배열이 주어졌다고 가정해 봅시다:

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

이 배열을 기반으로 해당 배열의 요소로 채워진 HTML 테이블을 만들어 봅시다. 즉, 각 행에 4개의 셀이 있는 3행의 테이블이 만들어집니다.

중첩된 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 형태로 출력하세요.

이전 문제를 수정하여 테이블에 요소 자체가 아닌 해당 요소의 제곱값이 기록되도록 하세요.