TableRow insertCell() 方法

Objek DOM TableRow HTML

定义和用法

insertCell() 方法将单元格插入到当前行中。

提示：请使用 deleteCell() 方法 删除当前表格行中的单元格。

另请参阅：

HTML 参考手册：Tanda <tr> HTML

实例

例子 1

在 id="myRow" 的表格行的开头插入包含内容的新单元格：

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

Coba Sendiri

页面下方提供更多实例。

语法

tablerowObject.insertCell()index)
Parameter Deskripsi
index

Diperlukan di Firefox dan Opera, dapat dipilih di IE, Chrome dan Safari.

Nilai numerik (dari 0), menentukan posisi sel baru di baris saat ini.

Nilai 0 akan mengakibatkan sel baru disisipkan di posisi pertama. Juga dapat digunakan nilai -1, yang akan mengakibatkan sel baru disisipkan di posisi terakhir.

Jika parameter ini dilewati, insertCell() di IE akan memasukkan sel baru di posisi terakhir, di Chrome dan Safari di posisi pertama.

Detil teknis

Nilai kembalian:

Elemen sel yang disisipkan.

Dukungan browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Beberapa contoh lain

Contoh 2

Masukkan sel baru yang berisi konten di akhir baris tabel dengan id="myRow":

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

Coba Sendiri

Contoh 3

Masukkan sel baru yang berisi konten di indeks 2 di baris tabel dengan id="myRow":

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

Coba Sendiri

Contoh 4

Masukkan sel baru di awal baris pertama tabel. Koleksi rows (.rows[0]) mengembalikan koleksi semua elemen <tr> yang ada di dalam tabel dengan id "myTable".

Angka [0] menentukan elemen yang akan dicari, di contoh ini, adalah baris pertama tabel. kemudian kami menggunakan insertcell() untuk memasukkan sel baru di indeks -1:

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

Coba Sendiri

Contoh 5

Hapus sel pertama dari baris tabel dengan id="myRow":

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

Coba Sendiri

Contoh 6

Masukkan baris baru di awal tabel.

Metode insertRow() menambahkan baris baru di tempat indeks yang ditentukan di dalam tabel, di contoh ini, di posisi pertama (awal) tabel dengan id="myTable".

Kemudian kami menggunakan metode insertCell() untuk menambahkan sel di baris baru.

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

Coba Sendiri

Objek DOM TableRow HTML