HTML 테이블 순차적으로 채우기

다음과 같은 빈 HTML 테이블이 있다고 가정해 보겠습니다:

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

이 테이블을 셀로 채우고 셀에 1부터 9까지의 숫자가 들어가도록 만들어 봅시다. 다음은 우리가 얻어야 할 결과의 예입니다:

<table id="table">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

이제 구현을 시작해 봅시다.

먼저 3 x 3 크기의 테이블을 만들고 셀을 'x' 문자로 채워 보겠습니다:

let table = document.querySelector('#table');

for (let i = 0; i < 3; i++) {
	let tr = document.createElement('tr');
	
	for (let i = 0; i < 3; i++) {
		let td = document.createElement('td');
		td.textContent = 'x';
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

이제 'x' 문자 대신 숫자가 오름차순으로 셀에 기록되도록 만들어 봅시다.

이를 위해서는 내부 루프의 각 반복마다 순차적으로 값을 증가시킬 또 다른 카운터를 도입해야 합니다. 다음과 같이 할 수 있습니다:

let table = document.querySelector('#table');

let k = 1; // 카운터 초기값
for (let i = 0; i < 3; i++) {
	let tr = document.createElement('tr');
	
	for (let i = 0; i < 3; i++) {
		let td = document.createElement('td');
		
		td.textContent = k; // 카운터 값을 셀에 기록
		k++; // 카운터 증가
		
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

5행 5열 크기의 HTML 테이블을 화면에 출력하고, 셀에는 1부터 25까지의 숫자가 순차적으로 들어가도록 하세요.

이전 문제를 수정하여 테이블 셀에 2부터 50까지의 짝수가 기록되도록 하세요.