X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Table insertRow() Method

Table Object Reference 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

Internet Explorer Firefox Opera Google Chrome Safari

The insertRow() method is supported in all major browsers.


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 IE and at the first position in Chrome and 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 Reference Table Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook