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

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

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

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

html<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' 문자로 채워 보겠습니다:

javascriptlet 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' 문자 대신 숫자가 오름차순으로 셀에 기록되도록 만들어 봅시다.

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

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