HTML 테이블에 행과 열 추가

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

행 추가하기

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

let 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);

버튼을 만들어 클릭할 때마다 테이블에 새로운 행이 추가되도록 하세요.

열 추가하기

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

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

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

크기가 2 x 2인 테이블이 주어져 있습니다:

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

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

버튼도 주어져 있습니다. 버튼을 클릭할 때마다 테이블의 행과 열이 각각 하나씩 증가하도록 만드세요.