Table cells Collection
Example
Find out how many cells there are in the first row in a table:
var x = document.getElementById("myTable").rows[0].cells.length;
The result of x will be:
2
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
The cells collection returns a collection of all <td> or <th> elements in a table.
Note: The elements in the collection are sorted as they appear in the source code.
Tip: Use the rows collection to return a collection of all <tr> elements in a table.
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.
Browser Support
| Collection | |||||
|---|---|---|---|---|---|
| cells | Yes | Yes | Yes | Yes | Yes |
Syntax
tableObject.cells
Properties
| Property | Description |
|---|---|
| length | Returns the number of <td> and/or <th> elements in the collection. Note: This property is read-only |
Methods
| Method | Description |
|---|---|
| [index] | Returns the <td> and/or <th> 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 <td> and/or <th> 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 <td> and/or <th> 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 <td> and/or <th> elements in the <table> element. The elements in the collection are sorted as they appear in the source code |
More Examples
Example
[index]
Alert the innerHTML of the first cell in the table's first row:
alert(document.getElementById("myTable").rows[0].cells[0].innerHTML);
Try it yourself »
Example
item(index)
Alert the innerHTML of the first cell in the table's first row:
alert(document.getElementById("myTable").rows[0].cells.item(0).innerHTML);
Try it yourself »
Example
namedItem(id)
Alert the innerHTML of the cell with id="myTd" in the table's first row:
alert(document.getElementById("myTable").rows[0].cells.namedItem("myTd").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 <td> tag
HTML reference: HTML <th> tag
JavaScript reference: HTML DOM TableData Object
JavaScript reference: HTML DOM TableHeader Object
Table Object