Phương thức createTFoot() của đối tượng HTMLTableElement tạo một phần tử <tfoot> rỗng và thêm vào bảng (ở cuối bảng). Nếu bảng đã có <tfoot>, trả về tfoot hiện có.
Cú pháp
var tfoot = tableElement.createTFoot()
Ví dụ: Tạo footer cho 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.createTFoot()</h1>
<table border="2" id="demoTable">
<tr><td>Tên</td><td>Mã SV</td></tr>
<tr><td>An</td><td>071717</td></tr>
<tr><td>Bình</td><td>031717</td></tr>
</table>
<button onclick="createFoot()" class="btn">Tạo Footer</button>
<script>
function createFoot() {
var table = document.getElementById('demoTable');
var foot = table.createTFoot();
foot.innerHTML = "<tr><td colspan='2'>Tổng: 2 sinh viên</td></tr>";
}
</script>
</body>
</html>
Kết quả:
- Ban đầu: Bảng 3 hàng, không có footer.
- Sau nhấn nút: Footer "Tổng: 2 sinh viên" xuất hiện ở cuối bảng.
- Bảng chỉ có 1
<tfoot>. - Trong HTML,
<tfoot>viết trước<tbody>nhưng hiển thị sau. DOM API tự xử lý vị trí. - Dùng cho tổng cộng, chú thích, pagination controls.
Phương thức đối ngược: deleteTFoot()
table.deleteTFoot();