TableRow insertCell() Method
Example
Insert new cell(s) with content at the beginning of a table row with id="myRow":
var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";
Try it yourself »
Definition and Usage
The insertCell() method inserts a cell into the current row.
Tip: Use the deleteCell() method to delete a cell in the current table row.
Browser Support
The insertCell() method is supported in all major browsers.
Syntax
tablerowObject.insertCell(index)
Parameter Values
| Value | Description |
|---|---|
| index | Required in Firefox and Opera, optional in IE, Chrome and Safari. A number (starts at 0) that specifies the position of the new cell in the current row.
The value of 0 results in that the new cell will be inserted at the
first position. The value of -1 can also be used; which results in that the new cell will be
inserted at the last position. If this parameter is omitted, insertCell() inserts the new cell at the last position in IE and at the first position in Chrome and Safari. This parameter is required in Firefox and Opera, but optional in Internet Explorer, Chrome and Safari. |
Technical Details
| Return Value: | The inserted cell element |
|---|
More Examples
Example
Insert new cell(s) with content at the end of a table row with id="myRow":
var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";
Try it yourself »
Example
Insert new cell(s) with content at the index position 2 of a table row with id="myRow":
var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";
Try it yourself »
Example
Insert new cell(s) at the beginning of the first table row. The table rows collection (.rows[0]) returns a collection of all <tr> elements in the table with id "myTable". The number [0] specifies the element to retrieve, in this example, the first table row. Then we use insertcell() to insert new cell(s) at index position -1:
var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";
Try it yourself »
Example
Delete the first cell(s) from a table row with id="myRow":
var row = document.getElementById("myRow");
row.deleteCell(0);
Try it yourself »
Example
Insert new row(s) at the beginning of a table. The insertRow() method inserts a new row at the specified index in a table, in this example, the first position (the beginning) of a table with id="myTable". Then we use the insertCell() method to add cells in the new row.
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 »
TableRow Object
