TableRow insertCell() metodu

HTML DOM TableRow nesnesi

Tanım ve Kullanım

insertCell() Metod, hücreyi mevcut satıra ekler.

İpucu:Kullanın: deleteCell() metodu Mevcut tablo satırındaki hücreleri silin.

Ayrıca bkz.:

HTML Referans Kılavuzu:HTML <tr> etiketi

Örnek

Örnek 1

id="myRow" olan tablo satırının başına içerik içeren yeni bir hücre ekleyin:

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

Kişisel olarak deneyin

Sayfa altında daha fazla örnek sağlanmaktadır.

gramer

tablerowObject.insertCell()index)
Parametre Açıklama
index

Firefox ve Opera'da zorunludur, IE, Chrome ve Safari'de ise seçenekeldir.

Sayısal değer (0'dan başlayarak), yeni hücrenin mevcut satırdaki konumunu belirler.

Değer 0, yeni hücrenin ilk konuma eklenmesini sağlar. -1 değeri de kullanılabilir, bu durumda yeni hücre son konuma eklenir.

Bu parametreyi atarsanız, IE'de insertCell() son konumda, Chrome ve Safari'de ise ilk konumda yeni bir hücre ekler.

Teknik ayrıntılar

Dönüş değeri:

Eklenen hücre elementi.

Tarayıcı desteği

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Destek Destek Destek Destek Destek

Daha fazla örnek

Örnek 2

id="myRow" olan tablo satırının sonuna yeni bir hücre ekleyerek içeriği ekleyin:

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

Kişisel olarak deneyin

Örnek 3

id="myRow" olan tablo satırının indeks konumunda 2'de yeni bir hücre ekleyerek içeriği ekleyin:

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

Kişisel olarak deneyin

Örnek 4

İlk tablo satırının başına yeni bir hücre ekleyin. rows koleksiyonu (.rows[0]), "myTable" id'li tablonun tüm <tr> elementlerinin koleksiyonunu döndürür.

Sayı [0], aranan elementi belirler, bu örnekte, ilk tablo satırıdır. Daha sonra, -1 indeks konumunda yeni bir hücre eklemek için insertcell() kullanırız:

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

Kişisel olarak deneyin

Örnek 5

id="myRow" olan tablo satırından ilk hücreyi silin:

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

Kişisel olarak deneyin

Örnek 6

Tablonun başına yeni bir satır ekleyin.

insertRow() yöntemi belirli bir indekste yeni bir satır ekler, bu örnekte, id="myTable" olan tablonun ilk konumunda (başında).

Sonra yeni satıra hücre eklemek için insertCell() yöntemini kullanırız.

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "YENİ HÜcre1";
cell2.innerHTML = "YENİ HÜcre2";

Kişisel olarak deneyin

HTML DOM TableRow nesnesi