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

Thuộc tính rows của đối tượng HTMLTableElement trả về một **HTMLCollection** chứa **tất cả các phần tử <tr> (hàng)** trong bảng — bao gồm hàng trong <thead>, <tbody>, <tfoot>. Đây là collection trực tiếp (live).

Cú pháp

var rowsCollection = tableElement.rows;

Thuộc tính

Thuộc tính	Mô tả
`length`	Số lượng hàng `<tr>` trong bảng

Phương thức

Phương thức	Mô tả
`[index]`	Trả về hàng `<tr>` tại vị trí `index` (0-based, duyệt theo thứ tự DOM)
`item(index)`	Tương tự `[index]`
`namedItem(id)`	Trả về hàng có `id` tương ứng

Ví dụ: Đếm tổng số hà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.rows</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>
  </table>
  <button onclick="countRows()" class="btn">Đếm hàng <tr></button>
  <div class="show" id="result"></div>
  <script>
    function countRows() {
      var table = document.querySelector('table');
      document.getElementById('result').textContent = 'Tổng số hàng <tr>: ' + table.rows.length;
    }
  </script>
</body>
</html>

Kết quả:

Bảng có 1 hàng trong thead + 2 hàng trong tbody = 3 hàng <tr>.
Nhấn nút → hiển thị "Tổng số hàng <tr>: 3".

Ứng dụng thực tế

Duyệt tất cả hàng để đọc/ghi dữ liệu: for (var i=0; i


Xóa hàng theo chỉ số: table.deleteRow(index).
Thêm hàng: table.insertRow(index).



Mẹo: Để chỉ lấy hàng trong tbody (bỏ header/footer), dùng table.tBodies[0].rows hoặc table.querySelectorAll('tbody tr').