JavaScript로 HTML 테이블 생성 함수

이제 createTable 함수를 만들어 보겠습니다. 이 함수는 지정된 크기의 테이블을 생성하여 지정된 요소의 끝에 추가할 것입니다.

첫 번째 매개변수로 행의 개수를, 두 번째 매개변수로 열의 개수를, 세 번째 매개변수로는 테이블이 생성될 DOM 요소에 대한 참조를 받도록 하겠습니다.

함수가 생성되면 어떻게 사용할지 살펴보겠습니다. 예를 들어, 다음과 같은 div가 주어졌다고 가정해 보겠습니다.

<div id="elem"></div>

이 div 안에 3행 4열의 테이블을 만들어 보겠습니다.

let div = document.querySelector('#elem');
createTable(3, 4, div);

이제 두 개의 div가 주어졌다고 가정해 보겠습니다.

<div id="elem1"></div>
<div id="elem2"></div>

각 div에 자체 테이블을 만들어 보겠습니다.

let div1 = document.querySelector('#elem1');
createTable(3, 4, div1);

let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);

생성된 테이블이 바로 보이도록 하기 위해 다음과 같은 CSS를 추가할 수 있습니다.

td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

다음은 설명한 함수의 템플릿입니다.

function createTable(rows, cols, parent) {
	let table = document.createElement('table');
	
	// 여기에 rows행과 cols열을 가진 테이블을 생성합니다.
	for () {
		for () {
			
		}
	}
	
	parent.appendChild(table);
}

위에 제시된 함수 템플릿의 코드를 완성하세요. 완성된 함수의 작동을 테스트해 보세요.