Table insertRow() Method
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
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 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
