Đối tượng TableRow (tr) trong HTML DOM

Đối tượng TableRow trong HTML DOM đại diện cho phần tử <tr> (hàng bảng). Cung cấp thuộc tính xác định vị trí hàng và phương thức thao tác ô (cell) trong hàng.

Tạo hàng động

var tr = document.createElement("TR");

Thuộc tính

Thuộc tính	Mô tả
`rowIndex`	Vị trí hàng trong collection `table.rows` (toàn bảng, 0-based)
`sectionRowIndex`	Vị trí hàng trong collection rows của section chứa nó (`thead`, `tbody`, hoặc `tfoot`)

Phương thức

Phương thức	Mô tả
`insertCell(index)`	Tạo và chèn `<td>` tại vị trí `index` trong hàng. Trả về cell mới. `index=-1` hoặc bỏ qua = chèn cuối.
`deleteCell(index)`	Xóa ô tại vị trí `index` trong hàng.

Ví dụ: Thêm hàng mới vào tbody

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; width: 400px; 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; }

<body>
  <h1>Demo: Tạo TableRow động</h1>
  <table border="2">
    <thead>
      <tr><th>Tên</th><th>Ngôn ngữ</th></tr>
    </thead>
    <tbody class="table-body">
      <tr><td>An</td><td>Tiếng Anh</td></tr>
      <tr><td>Bình</td><td>Tiếng Đức</td></tr>
    </tbody>
  </table>
  <button onclick="addRow()" class="btn">Thêm hàng</button>
  <script>
    function addRow() {
      var tr = document.createElement("TR");
      tr.innerHTML = "<td>Cường</td><td>Tiếng Pháp</td>";
      document.querySelector(".table-body").appendChild(tr);
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Hàng "Cường | Tiếng Pháp" được thêm vào cuối tbody.

Ví dụ nâng cao: Dùng insertCell/deleteCell

function modifyRow() {
  var table = document.querySelector('table');
  var row = table.rows[1]; // Hàng dữ liệu đầu tiên (index 1 vì index 0 là header)

  // Thêm cột "Ghi chú" ở cuối
  var newCell = row.insertCell(-1);
  newCell.textContent = "Mới";

  // Xóa cột đầu tiên (Tên)
  row.deleteCell(0);
}

Lưu ý

rowIndex tính trên toàn bảng (kể header), sectionRowIndex chỉ trong tbody/thead/tfoot.
insertCell() tạo <td>, không phải <th>. Cần createElement("TH") cho header cell.
Duyệt hàng: for (var i=0; i