Phương thức insertRow() của Table trong HTML DOM

Phương thức insertRow() của đối tượng HTMLTableElement tạo một hàng <tr> rỗng và chèn vào bảng tại vị trí index chỉ định. Trả về hàng vừa tạo (để tiếp tục thêm ô <td>/<th>).

Cú pháp

var newRow = tableElement.insertRow(index)

• index: Vị trí chèn (0-based). index = -1 hoặc bỏ qua = chèn vào cuối. Nếu index > số hàng hiện có, chèn vào cuối.
• Hàng mới được tạo **không có ô** — phải thêm <td> hoặc <th> sau.

Ví dụ: Thêm hàng vào giữa 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; }

<body>
  <h1>Demo: table.insertRow()</h1>
  <table border="2" id="demoTable">
    <tr><td>Tên</td><td>Mã SV</td></tr>
    <tr><td>An</td><td>071717</td></tr>
    <tr><td>Bình</td><td>031717</td></tr>
  </table>
  <button onclick="addRow()" class="btn">Thêm hàng ở giữa</button>
  <script>
    function addRow() {
      var table = document.getElementById('demoTable');
      var row = table.insertRow(1); // Chèn sau hàng 0 (trước hàng "An")
      row.innerHTML = "<td>Cường</td><td>081717</td>";
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: 3 hàng.
2. Sau nhấn nút: Hàng "Cường | 081717" xuất hiện ở vị trí thứ 2 (index 1), đẩy "An" xuống.

Thêm ô (cell) vào hàng mới

Sau insertRow(), dùng row.insertCell() hoặc row.innerHTML:

var row = table.insertRow(-1); // Thêm cuối
var cell1 = row.insertCell(0);
cell1.textContent = "Dũng";
var cell2 = row.insertCell(1);
cell2.textContent = "091717";

Lưu ý

• insertRow() trên table chèn vào toàn bảng (thead/tbody/tfoot).
• Để chèn vào tbody cụ thể: table.tBodies[0].insertRow(index).
• Hàng chèn vào sẽ kế thừa style của bảng.

Phương thức liên quan

• deleteRow(index): Xóa hàng.
• insertCell() (trên hàng): Thêm ô.
• deleteCell() (trên hàng): Xóa ô.