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

Thuộc tính tBodies của đối tượng HTMLTableElement trong DOM trả về một **HTMLCollection** chứa tất cả các phần tử <tbody> trong bảng. Đây là tập hợp trực tiếp (live collection) — tự động cập nhật khi thêm/xóa <tbody>.

Cú pháp

var tBodiesCollection = tableElement.tBodies;

Thuộc tính của tBodies Collection

Phương thức của tBodies Collection

Ví dụ: Đếm số <tbody> trong 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; }
  .show { font-size: 1.2rem; margin-top: 1rem; }

<body>
  <h1>Demo: table.tBodies</h1>
  <table border="2">
    <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>
    <tbody>
      <tr><td>Cường</td><td>021717</td></tr>
      <tr><td>Dũng</td><td>011717</td></tr>
    </tbody>
  </table>
  <button onclick="countTBody()" class="btn">Đếm <tbody></button>
  <div class="show" id="result"></div>
  <script>
    function countTBody() {
      var table = document.querySelector('table');
      var count = table.tBodies.length;
      document.getElementById('result').textContent = 'Số <tbody>: ' + count;
    }
  </script>
</body>
</html>

Kết quả:

• Bảng có 2 <tbody> (mỗi nhóm 2 hàng).
• Nhấn nút → hiển thị "Số <tbody>: 2".

Khi nào dùng tBodies?

• Duyệt qua các nhóm hàng (ví dụ: mỗi tbody là một nhóm dữ liệu logic).
• Thêm/xóa hàng vào tbody cụ thể: table.tBodies[0].appendChild(row).
• Kiểm tra cấu trúc bảng động.

Lưu ý: Nếu bảng không có <tbody> rõ ràng, trình duyệt tự tạo một tbody ẩn (anonymous). table.tBodies.length sẽ trả về ít nhất 1.