Phương thức deleteTFoot() của đối tượng HTMLTableElement xóa phần tử <tfoot> (nếu có) khỏi bảng. Nếu bảng không có <tfoot>, phương thức không làm gì (không báo lỗi).
Cú pháp
tableElement.deleteTFoot()
Ví dụ: Xóa footer bảng
<!DOCTYPE html>
<html>
<style>
body { color: #000; background: lightblue; height: 100vh; text-align: center; }
table { margin: 2rem auto; border-collapse: collapse; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
<body>
<h1>Demo: table.deleteTFoot()</h1>
<table border="2" id="demoTable">
<thead>
<tr><th>Tên</th><th>Mã SV</th></tr>
</thead>
<tbody>
<tr><td>An</td><td>071717</td></tr>
<tr><td>Bình</td><td>031717</td></tr>
</tbody>
<tfoot>
<tr><td colspan="2">Tổng: 2 sinh viên</td></tr>
</tfoot>
</table>
<button onclick="removeFoot()" class="btn">Xóa Footer</button>
<script>
function removeFoot() {
var table = document.getElementById('demoTable');
table.deleteTFoot();
}
</script>
</body>
</html>
Kết quả:
- Ban đầu: Bảng có footer "Tổng: 2 sinh viên" ở cuối.
- Sau khi nhấn "Xóa Footer": Footer biến mất hoàn toàn.
- Bảng chỉ có tối đa 1
<tfoot>. - Trong HTML chuẩn,
<tfoot>viết **trước**<tbody>nhưng hiển thị **sau**<tbody>. DOM API không quan tâm thứ tự viết. - Dùng khi cần ẩn/tùy chọn hiển thị tổng kết, chú thích chân trang.
Phương thức đối ngược: createTFoot()
var newFoot = table.createTFoot(); newFoot.innerHTML = "<tr><td colspan='2'>Footer mới</td></tr>";