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

Đối tượng HTML DOM Table

Định nghĩa và cách sử dụng

insertRow() Phương thức tạo thẻ Thẻ <tr> và thêm nó vào bảng.

insertRow() Phương thức chèn dòng mới ở vị trí quy định trong bảng.

Chú ý:Thẻ <tr> phải chứa thẻ <th> hoặc <td>.

Lưu ý:Hãy sử dụng Phương thức deleteRow() Xóa một dòng.

Xem thêm:

Hướng dẫn HTML:Thẻ HTML <tr>

Mô hình

Ví dụ 1

Chèn dòng mới vào vị trí đầu tiên của bảng (và chèn thẻ <td> có nội dung):

// Tìm thẻ <table> có id="myTable":
var table = document.getElementById("myTable");
// Tạo một thẻ <tr> trống và thêm nó vào vị trí đầu tiên của bảng:
var row = table.insertRow(0);
// Chèn ô mới (thẻ <td>) vào vị trí đầu tiên và thứ hai của thẻ <tr> mới:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
// Thêm văn bản vào ô mới:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";

Thử ngay

Ví dụ 2

Tạo và xóa dòng:

function myCreateFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "NEW CELL1";
  cell2.innerHTML = "NEW CELL2";
}
function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(0);
}

Thử ngay

Cú pháp

tableObject.insertRow(index)
Tham số Mô tả
index

Đây là bắt buộc trong Firefox và Opera, và là tùy chọn trong IE, Chrome và Safari.

Giá trị, quy định vị trí dòng cần chèn (bắt đầu từ 0). Giá trị 0 sẽ chèn dòng mới ở vị trí đầu tiên.

Cũng có thể sử dụng giá trị -1, điều này sẽ dẫn đến việc chèn một dòng mới ở vị trí cuối cùng.

Nếu bỏ qua tham số này, hàm insertRow() sẽ chèn hàng mới vào vị trí cuối cùng trong Chrome, IE, Firefox và Opera, và vào vị trí đầu tiên trong Safari.

Chi tiết kỹ thuật

Giá trị trả về: Thẻ <tr> được chèn vào.

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Đối tượng HTML DOM Table