phương thức insertCell() của TableRow

Đối tượng TableRow của HTML DOM

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

insertCell() phương thức này sẽ chèn ô vào hàng hiện tại.

thông báo:vui lòng sử dụng phương thức deleteCell() xóa ô trong hàng bảng hiện tại.

xem thêm:

Hướng dẫn tham khảo HTML:Thẻ <tr> của HTML

ví dụ

ví dụ 1

chèn một ô mới chứa nội dung vào đầu hàng bảng có id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";

Thử nghiệm trực tiếp

dưới đây cung cấp thêm các ví dụ.

cú pháp

tablerowObject.insertCell()index)
Tham số Mô tả
index

Được yêu cầu trong Firefox và Opera, tùy chọn trong IE, Chrome và Safari.

Giá trị số (bắt đầu từ 0), quy định vị trí của ô mới trong hàng hiện tại.

Giá trị 0 sẽ dẫn đến việc chèn ô 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ới ở vị trí cuối cùng.

Nếu bỏ qua tham số này, phương thức insertCell() trong IE sẽ chèn mới ở vị trí cuối cùng, trong Chrome và Safari sẽ chèn mới ở vị trí đầu tiên.

Chi tiết kỹ thuật

Giá trị trả về:

Phần tử ô được chèn.

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ợ

Những ví dụ khác

Ví dụ 2

Chèn ô mới chứa nội dung ở cuối hàng bảng có id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";

Thử nghiệm trực tiếp

Ví dụ 3

Chèn ô mới chứa nội dung ở vị trí chỉ định 2 trong hàng bảng có id="myRow":

var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";

Thử nghiệm trực tiếp

Ví dụ 4

Chèn ô mới ở đầu hàng đầu tiên của bảng. Tập hợp rows (.rows[0]) của bảng trả về tập hợp tất cả các phần tử <tr> của bảng có id là "myTable".

Số liệu [0] quy định phần tử cần tìm kiếm, trong ví dụ này, là hàng đầu tiên của bảng. Sau đó chúng ta sử dụng insertcell() để chèn mới ở vị trí chỉ định -1:

var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";

Thử nghiệm trực tiếp

Ví dụ 5

Xóa ô đầu tiên trong hàng bảng có id="myRow":

var row = document.getElementById("myRow");
row.deleteCell(0);

Thử nghiệm trực tiếp

Ví dụ 6

Chèn hàng mới vào đầu bảng.

Phương thức insertRow() chèn hàng mới vào vị trí chỉ định trong bảng, trong ví dụ này, là vị trí đầu tiên (ở đầu) của bảng có id="myTable".

Sau đó chúng ta sử dụng phương thức insertCell() để thêm ô mới vào hàng mới.

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";

Thử nghiệm trực tiếp

Đối tượng TableRow của HTML DOM