Latest web development tutorials
 

TableRow insertCell() Method

< TableRow Object

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

Method
insertCell() Yes Yes Yes Yes Yes

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