Bộ sưu tập các hàng trong bảng HTML DOM

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

Cú pháp

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

object.rows

Thuộc tính của Bộ sưu tập hàng

các phần tử trong bộ sưu tập trong tài liệu HTML.

Chiều dài trong tập hợp trong tài liệu HTML.

Thuộc tính	Giải thích
	Nó trả về số phần tử

Phương thức tập hợp hàng

phần tử từ phần tử bộ sưu tập từ bộ sưu tập. phần tử từ bộ sưu tập

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 thức	Giải thích
[index]	Nó trả về phần tử
item (index)
Nó trả về phần tử
tênItem (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 các hàng trong bảng DOM HTML -

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 rows 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>
</table>
<button onclick="get()" class="btn">Get Number of Rows</button>
<div class="show"></div>
<script>
   function get() {
      var table = document.querySelector('table');
      document.querySelector('.show').innerHTML = 'Number of rows : ' + table.rows.length;
   }
</script>
</body>
</html>

Đầu ra

Bộ sưu tập các hàng trong bảng HTML DOM

Nhấp vào “ Lấy số lượng hàng ”Để lấy số lượng phần tử từ bộ sưu tập.

Bộ sưu tập các hàng trong bảng HTML DOM