HTML 테이블에 캡션(제목)을 추가하려면 JavaScript DOM에서 제공하는 createCaption() 메서드를 사용하면 됩니다. 이 메서드는 테이블 객체에서 호출되며, 해당 테이블에 <caption> 요소를 생성한 후 반환합니다. 반환된 캡션 요소의 innerHTML 속성에 원하는 텍스트를 할당하면 화면에 캡션이 표시됩니다.
createCaption() 메서드 동작 원리
createCaption() 메서드는 이미 캡션이 존재하는 경우 새로 생성하지 않고 기존 캡션을 그대로 반환합니다. 따라서 버튼을 여러 번 클릭해도 중복된 캡션이 생기지 않으므로 안전하게 사용할 수 있습니다.
예제 코드
아래 예제는 버튼을 클릭했을 때 테이블에 "Demo Caption"이라는 캡션을 동적으로 추가하는 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<script>
function captionFunc(x) {
document.getElementById(x).createCaption().innerHTML = "Demo Caption";
}
</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="captionFunc('newtable')" value="Display Table Caption">
</p>
</body>
</html>
코드 설명
위 코드의 핵심 부분을 단계별로 살펴보겠습니다.
1. 함수 정의: captionFunc() 함수는 매개변수 x로 테이블의 id 값을 전달받습니다. 이를 통해 하나의 함수로 여러 테이블에 캡션을 추가할 수 있습니다.
2. 요소 선택: document.getElementById(x)를 사용하여 id가 일치하는 테이블 요소를 가져옵니다.
3. 캡션 생성 및 텍스트 설정: createCaption()으로 캡션 요소를 만들고, innerHTML에 "Demo Caption" 문자열을 할당하여 즉시 화면에 표시합니다.
4. 버튼 클릭 이벤트: input 버튼의 onclick 속성에 captionFunc('newtable')을 연결하여, 클릭 시 id가 'newtable'인 테이블에 캡션이 추가되도록 합니다.
마무리
이처럼 DOM의 createCaption() 메서드를 활용하면 별도의 HTML 마크업 수정 없이도 JavaScript만으로 테이블 캡션을 손쉽게 동적 추가할 수 있습니다. deleteCaption() 메서드와 함께 사용하면 캡션을 추가하고 제거하는 기능도 구현할 수 있으니 참고해 보세요.