Latest web development tutorials
 

Table insertRow() Method

< Table Object

Example

Insert new row(s) at the first position of a table (and insert a <td> element with some content to it):

// Find a <table> element with id="myTable":
var table = document.getElementById("myTable");

// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(0);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

// Add some text to the new cells:
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
Try it Yourself »

Definition and Usage

The insertRow() method creates an empty <tr> element and adds it to a table.

The insertRow() method inserts the new row(s) at the specified index in the table.

Note: A <tr> element must contain one or more <th> or <td> elements.

Tip: Use the deleteRow() method to remove a row.


Browser Support

Method
insertRow() Yes Yes Yes Yes Yes

Syntax

tableObject.insertRow(index)

Parameter Values

Value Description
index Required in Firefox and Opera, optional in IE, Chrome and Safari. A number that specifies the position of the row to insert (starts at 0). The value of 0 results in that the new row will be inserted at the first position.

The value of -1 can also be used, this results in a new row being inserted at the last position.

This parameter is required in Firefox and Opera, but optional in Internet Explorer, Chrome and Safari.

If this parameter is omitted, insertRow() inserts a new row at the last position in Chrome, IE, Firefox and Opera, and at the first position in Safari.

Technical Details

Return Value: The inserted <tr> element

More Examples

Example

Create and delete row(s):

function myCreateFunction() {
    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";
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(0);
}
Try it Yourself »

Related Pages

HTML reference: HTML <tr> tag


< Table Object