JavaScript에서 테이블에 새로운 행을 동적으로 추가하려면 DOM 메서드인 insertRow()를 사용하면 됩니다. 이 메서드는 테이블의 지정된 위치에 새로운 행(<tr> 요소)을 삽입하고, 생성된 행 객체를 반환하므로 이후 셀을 추가하거나 내용을 채우는 작업을 이어서 수행할 수 있습니다.
핵심 메서드 정리
- insertRow(index): 테이블의 지정한 인덱스 위치에 새 행을 추가합니다. 인덱스를
0으로 지정하면 테이블의 맨 위에 행이 삽입됩니다. - insertCell(index): 새로 만든 행 안에 셀(<td> 요소)을 추가합니다. 마찬가지로 인덱스 순서대로 셀이 배치됩니다.
예제 코드
아래 예제를 실행한 후 "Add a row(행 추가)" 버튼을 클릭해 보세요. 버튼을 누를 때마다 테이블 맨 위에 새로운 행이 하나씩 추가되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<script>
function rowFunction(x) {
var a = document.getElementById(x).insertRow(0);
var b = a.insertCell(0);
var c = a.insertCell(1);
b.innerHTML = c.innerHTML = "row";
}
</script>
</head>
<body>
<table style="border:2px solid black" id="newtable">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
</table>
<p>
<input type="button" onclick="rowFunction('newtable')" value="Add a row">
</p>
</body>
</html>코드 동작 원리
버튼을 클릭하면 rowFunction() 함수가 실행됩니다. 먼저 document.getElementById()로 대상 테이블을 가져온 뒤 insertRow(0)을 호출해 테이블의 첫 번째 위치에 새 행을 삽입합니다. 그다음 insertCell(0)과 insertCell(1)로 두 개의 셀을 생성하고, innerHTML 속성을 이용해 각 셀에 "row"라는 텍스트를 입력합니다.
이처럼 insertRow()와 insertCell()을 조합하면 별도의 라이브러리 없이 순수 JavaScript만으로 테이블 구조를 유연하게 조작할 수 있습니다. 사용자 입력 데이터를 목록 형태로 화면에 추가하거나, 실시간으로 데이터를 갱신해야 하는 웹 애플리케이션에서 매우 유용하게 활용됩니다.