Bộ sưu tập tBodies của bảng HTML DOM

Bảng HTML DOM tBodies Collection trả về một tập hợp tất cả các phần tử trong một bảng trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

object.tBodies

Thuộc tính của Bộ sưu tập tBodies

trong bộ sưu tập trong tài liệu HTML

Thuộc tính	Giải thích
chiều dài	Nó trả về số lượng phần tử

Thuộc tính của Bộ sưu tập tBodies

chỉ mục được chỉ định từ bộ sưu tập. chỉ mục được chỉ định từ bộ sưu tập. được chỉ định từ bộ sưu tập.

Phương pháp	Giải thích
[index]	Nó trả về phần tử
mục (chỉ mục)	Nó trả về phần tử
namesItem (id)	Nó trả về phần tử id

Hãy để chúng tôi xem một ví dụ về Bộ sưu tập tBodies của bảng HTML DOM -

Ví dụ

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
      text-align: center;
   }
   table {
      margin: 2rem auto;
   }
   .show {
      font-size: 1.2rem;
   }
   .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;
   }
</style>
<body>
<h1>DOM Table tBodies Collection 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>
<tbody>
<tr>
<td>Elon</td>
<td>021717</td>
</tr>
<tr>
<td>Mario</td>
<td>011717</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Get Number of table body</button>
<div class="show"></div>
<script>
   function get() {
      var table = document.querySelector('table');
      document.querySelector('.show').innerHTML = 'Number of table body element : ' + table.tBodies.length;
   }  
</script>
</body>
</html>

Đầu ra

Bộ sưu tập tBodies của bảng HTML DOM

Nhấp vào nút “Lấy số phần thân bảng” để lấy số phần tử từ bộ sưu tập.

Bộ sưu tập tBodies của bảng HTML DOM