TableRow insertCell() 方法

HTML DOM TableRow object

定义和用法

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

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

另请参阅：

HTML 参考手册：HTML <tr> tag

实例

例子 1

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

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

Try it yourself

页面下方提供更多实例。

语法

tablerowObject.insertCell()index)
Parameters Beschrijving
index

Verplicht in Firefox en Opera, optioneel in IE, Chrome en Safari.

Numerieke waarde (beginnend bij 0), die de positie van de nieuwe cel in de huidige rij bepaalt.

De waarde 0 zorgt ervoor dat de nieuwe cel wordt ingevoegd op de eerste positie. Ook kan de waarde -1 worden gebruikt, wat ervoor zorgt dat de nieuwe cel wordt ingevoegd op de laatste positie.

Als dit parameter wordt weggelaten, voegt insertCell() in IE op de laatste positie toe, in Chrome en Safari op de eerste positie.

Technische details

Retournerende waarde:

De ingevoegde cel-elementen.

Browserondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Meer voorbeelden

Voorbeeld 2

Voeg een nieuwe cel met inhoud in op het einde van de tabelrij met id="myRow":

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

Try it yourself

Voorbeeld 3

Voeg een nieuwe cel met inhoud in op de indexpositie 2 van de tabelrij met id="myRow":

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

Try it yourself

Voorbeeld 4

Voeg een nieuwe cel in op het begin van de eerste tabelrij. De rows-collectie (.rows[0]) retourneert een verzameling van alle <tr>-elementen in de tabel met id "myTable".

Het getal [0] bepaalt het element dat moet worden opgehaald, in dit voorbeeld, is het de eerste tabelrij. Vervolgens gebruiken we insertcell() om een nieuwe cel in te voegen op de indexpositie -1:

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

Try it yourself

Voorbeeld 5

Verwijder de eerste cel van de tabelrij met id="myRow":

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

Try it yourself

Voorbeeld 6

Voeg een nieuwe rij toe aan het begin van de tabel.

De methode insertRow() voegt een nieuwe rij in op de opgegeven index in de tabel, in dit voorbeeld, de eerste positie (aan het begin) van de tabel met id="myTable".

Daarna gebruiken we de methode insertCell() om een cel toe te voegen aan de nieuwe rij.

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

Try it yourself

HTML DOM TableRow object