FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

Table rows Collection

Table Object Reference Table Object

Example

Find out how many rows there are in a table:

var x = document.getElementById("myTable").rows.length;

The result of x will be:

2
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The rows collection returns a collection of all <tr> elements in a table.

Note: The elements in the collection are sorted as they appear in the source code.

Tip: Use the insertRow() method to create a new row (<tr>).

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

Tip: Use the insertCell() method to create a new cell (<td>).

Tip: Use the deleteCell() method to delete a cell.

Tip: Use the cells collection to return a collection of all <td> or <th> elements in a table.


Browser Support

Collection
rows Yes Yes Yes Yes Yes

Syntax

tableObject.rows

Properties

Property Description
length Returns the number of <tr> elements in the collection.

Note: This property is read-only

Methods

Method Description
[index] Returns the <tr> element from the collection with the specified index (starts at 0).

Note: Returns null if the index number is out of range
item(index) Returns the <tr> element from the collection with the specified index (starts at 0).

Note: Returns null if the index number is out of range
namedItem(id) Returns the <tr> element from the collection with the specified id.

Note: Returns null if the id does not exist

Technical Details

DOM Version: Core Level 2 Document Object
Return Value: An HTMLCollection Object, representing all <tr> elements in the <table> element. The elements in the collection are sorted as they appear in the source code

Examples

More Examples

Example

[index]

Alert the innerHTML of the first <tr> element (index 0) in the table:

alert(document.getElementById("myTable").rows[0].innerHTML;
Try it Yourself »

Example

item(index)

Alert the innerHTML of the first <tr> element (index 0) in the table:

alert(document.getElementById("myTable").rows.item(0).innerHTML);
Try it Yourself »

Example

namedItem(id)

Alert the innerHTML of the <tr> element with id="myRow" in the table:

alert(document.getElementById("myTable").rows.namedItem("myRow").innerHTML);
Try it Yourself »

Example

Change the content of the first table cell:

var x = document.getElementById("myTable").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";
Try it Yourself »

Related Pages

HTML reference: HTML <tr> tag

JavaScript reference: HTML DOM TableRow Object


Table Object Reference Table Object