Thuộc tính tFoot của Table trong HTML DOM

Thuộc tính tFoot của đối tượng HTMLTableElement trả về phần tử <tfoot> của bảng (nếu có), hoặc null nếu bảng chưa có tfoot. Truy xuất trực tiếp footer bảng để đọc/ghi nội dung.

Cú pháp

var tfoot = tableElement.tFoot;

Ví dụ: Lấy và hiển thị nội dung tfoot

<!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; }
  .show { font-size: 1.2rem; margin-top: 1rem; }

<body>
  <h1>Demo: table.tFoot</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="showFoot()" class="btn">Hiện tfoot</button>
  <div class="show" id="result"></div>
  <script>
    function showFoot() {
      var table = document.getElementById('demoTable');
      var foot = table.tFoot;
      if (foot) {
        document.getElementById('result').innerHTML = 'tfoot HTML: ' + foot.innerHTML;
      } else {
        document.getElementById('result').textContent = 'Bảng không có tfoot';
      }
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Hiển thị: tfoot HTML: <tr><td colspan="2">Tổng: 2 sinh viên</td></tr>

Ứng dụng

• Cập nhật tổng kết động: table.tFoot.rows[0].cells[0].textContent = "Tổng: " + count
• Kiểm tra sự tồn tại footer trước khi thao tác.

Phương thức liên quan

• createTFoot(): Tạo tfoot nếu chưa có, trả về tfoot.
• deleteTFoot(): Xóa tfoot.

Lưu ý: tFoot là thuộc tính chỉ đọc. Trong HTML, <tfoot> viết trước <tbody> nhưng hiển thị sau — DOM property tFoot trả về đúng element footer bất kể thứ tự viết.