TableRow insertCell() 方法

HTML DOM TableRow-Objekt

定义和用法

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

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

另请参阅：

HTML 参考手册：HTML <tr>-Tag

实例

例子 1

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

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

Selbst ausprobieren

页面下方提供更多实例。

语法

tablerowObject.insertCell()index)
Parameter Beschreibung
index

In Firefox und Opera ist dies obligatorisch, in IE, Chrome und Safari ist es optional.

Zahl (beginnend bei 0), die die Position der neuen Zelle in der aktuellen Zeile legt.

Der Wert 0 führt dazu, dass die neue Zelle an die erste Stelle eingefügt wird. Es kann auch der Wert -1 verwendet werden, was zur Einfügung der neuen Zelle an die letzte Stelle führt.

Wird dieser Parameter weggelassen, wird insertCell() in IE an der letzten Stelle, in Chrome und Safari an der ersten Stelle eine neue Zelle einfügen.

Technische Details

Rückgabewert:

Element der einzufügenden Zelle.

Browserunterstützung

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützt Unterstützt Unterstützt Unterstützt Unterstützt

Mehr Beispiele

Beispiel 2

Fügen Sie eine neue Zelle mit Inhalt am Ende der Tabellenzeile mit id="myRow" ein:

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

Selbst ausprobieren

Beispiel 3

Fügen Sie eine neue Zelle mit Inhalt an der Stelle 2 der Tabellenzeile mit id="myRow" ein:

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

Selbst ausprobieren

Beispiel 4

Fügen Sie eine neue Zelle am Anfang der ersten Tabellenzeile ein. Die Rows-Sammlung (.rows[0]) gibt die Sammlung aller <tr>-Elemente der Tabelle mit id "myTable" zurück.

Die Zahl [0] legt das zu suchende Element fest, im vorliegenden Beispiel ist es die erste Tabellenzeile. Dann verwenden wir insertCell() im Index -1, um eine neue Zelle an dieser Stelle einzufügen:

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

Selbst ausprobieren

Beispiel 5

Löschen Sie die erste Zelle der Tabellenzeile mit id="myRow":

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

Selbst ausprobieren

Beispiel 6

Fügen Sie eine neue Zeile am Anfang der Tabelle ein.

Die Methode insertRow() fügt eine neue Zeile an der angegebenen Stelle im Table ein, im vorliegenden Beispiel am ersten Ort (am Anfang) der Tabelle mit id="myTable".

Dann verwenden wir die Methode insertCell() zum Hinzufügen von Zellen in der neuen Zeile.

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEUER ZELLE1";
cell2.innerHTML = "NEUER ZELLE2";

Selbst ausprobieren

HTML DOM TableRow-Objekt