deleteTFoot() 메서드란?
HTML DOM의 deleteTFoot() 메서드는 HTML 문서 내 테이블에서 <tfoot> 요소를 제거하는 기능을 수행합니다. 테이블의 하단 요약 행이나 푸터 영역을 동적으로 삭제해야 할 때 유용하게 사용할 수 있습니다.
문법(Syntax)
기본 문법은 다음과 같습니다.
object.deleteTFoot()
이 메서드는 별도의 매개변수를 받지 않으며, 호출 시 해당 테이블에 존재하는 <tfoot> 요소를 즉시 제거합니다.
예제(Example)
아래 예제는 버튼을 클릭하면 테이블의 푸터가 삭제되도록 구현한 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
}
caption {
color: #db133a;
}
.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 Table deleteTFoot() Method Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
<button onclick="remove()" class="btn">Remove Footer</button>
<script>
function remove() {
document.querySelector('table').deleteTFoot();
}
</script>
</body>
</html>실행 결과(Output)
코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
여기서 “Remove Footer” 버튼을 클릭하면 deleteTFoot() 메서드가 실행되어 테이블 하단의 푸터(<tfoot>)가 즉시 사라집니다.
참고 사항
deleteTFoot()와 반대로 테이블에 새로운 푸터를 추가하려면 createTFoot() 메서드를 사용하면 됩니다. 또한 테이블 헤더를 다룰 때는 createTHead(), deleteTHead() 메서드를 활용할 수 있으며, 이들은 모든 최신 브라우저에서 잘 지원됩니다.