HTML DOM의 TableRow 객체는 HTML 문서 내의 <tr> 요소를 나타냅니다. 이 객체를 활용하면 자바스크립트로 테이블의 행을 동적으로 생성, 수정, 삭제할 수 있습니다.
TableRow 객체 생성하기
TableRow 객체는 createElement() 메서드를 사용하여 새롭게 생성할 수 있습니다.
문법
document.createElement("TR");TableRow 객체의 속성
TableRow 객체에서 제공하는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| rowIndex | 테이블 전체 rows 컬렉션에서 해당 행의 위치(인덱스)를 반환합니다. |
| sectionRowIndex | thead, tbody 또는 tfoot 섹션의 rows 컬렉션에서 해당 행의 위치를 반환합니다. |
TableRow 객체의 메서드
TableRow 객체에서 제공하는 주요 메서드는 다음과 같습니다.
| 메서드 | 설명 |
|---|---|
| deleteCell() | 현재 테이블 행에서 지정한 셀(<td>)을 삭제합니다. |
| insertCell() | 현재 테이블 행에 새로운 셀(<td>)을 삽입합니다. |
TableRow 객체 예제
버튼을 클릭하면 새로운 테이블 행이 동적으로 추가되는 예제입니다.
예제 코드
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
width: 400px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>DOM TableRow Object Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
</tr>
<thead>
<tbody class="table-body">
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td>Elon</td>
<td>Germany</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Create TableRow</button>
<script>
function get() {
var tr = document.createElement("TR");
tr.innerHTML = "<td>Mario</td><td>French</td>"
document.querySelector(".table-body").appendChild(tr);
}
</script>
</body>
</html>실행 결과
위 화면에서 “Create TableRow” 버튼을 클릭하면, createElement("TR")로 새로운 행이 생성되고 Mario/French 데이터가 포함된 셀이 tbody에 추가됩니다.
코드 설명
예제의 핵심 로직은 다음과 같습니다.
1. document.createElement("TR")로 새로운 <tr> 요소를 생성합니다.
2. innerHTML 속성을 이용해 두 개의 셀(<td>)을 행 안에 넣어줍니다.
3. appendChild(tr) 메서드로 완성된 행을 tbody에 추가합니다.
이처럼 TableRow 객체를 활용하면 페이지를 새로고침하지 않고도 테이블에 데이터를 실시간으로 추가할 수 있어, 동적인 웹 애플리케이션 개발에 매우 유용합니다.