HTML 테이블에 행과 열 추가

#table라는 HTML 테이블이 있다고 가정해 보겠습니다. 이 테이블에 새로운 행과 열을 추가하는 방법을 배워봅시다.

행 추가하기

행을 추가하는 것은 어렵지 않습니다: tr를 생성한 다음, 해당 행에 필요한 수의 셀을 추가하는 반복문을 실행하면 됩니다(3개라고 가정):

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

let tr = document.createElement('tr');

for (let i = 1; i <= 3; i++) {
  let td = document.createElement('td');
  tr.appendChild(td);
}

table.appendChild(tr);

열 추가하기

열을 추가하는 것은 조금 더 복잡합니다: 테이블의 모든 행을 순회하는 반복문을 실행하고, 각 행에 새로운 셀을 추가해야 합니다:

javascriptlet trs = document.querySelectorAll('#table tr');

for (let tr of trs) {
  let td = document.createElement('td');
  tr.appendChild(td);
}

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

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