Javascript Reference - HTML DOM Table cells Collection

The cells collection returns a collection of all <td> or <th> elements in a table.

Browser Support


`cells`	Yes	Yes	Yes	Yes	Yes

Syntax

tableObject.cells

Properties

Property	Description
length	Returns the number of <td> or <th> elements in the collection

Methods

Method	Description
[name_or_index]	Get element by name or index which starts at 0
item(name_or_index)	Get element from the collection by index/name/id
namedItem(name_or_id)	Get the element from the collection by name or id attribute

Example

The following code shows how to Alert the innerHTML of the first cell in the table's first row by using [name_or_index] syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--   w  w  w.j  a va 2 s  . c o m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").rows[0].cells[0].innerHTML);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to Alert the innerHTML of the first cell in the table's first row by using item(name_or_index) syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  ww  w  .  jav  a  2 s.c o m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br> 

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").rows[0].cells.item(0).innerHTML);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to Alert the innerHTML of the cell with id="myTd" in the table's first row by using namedItem(name_or_id) syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from   w  ww. j  a v a2  s .  c o  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td id="myTd">Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br> 

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myTable").rows[0].cells.namedItem("myTd").innerHTML);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to change the content of the first table cell.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from w w w  . ja  v a2  s  . com-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>Row1 cell1</td>
    <td>Row1 cell2</td>
  </tr>
  <tr>
    <td>Row2 cell1</td>
    <td>Row2 cell2</td>
  </tr>
  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
  </tr>
</table>
<br> 

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    var x = document.getElementById("myTable").rows[0].cells;
    x[0].innerHTML = "NEW CONTENT";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to show the number of cells in the first row.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from w w  w  .  ja  v  a  2  s . c  o m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td>
    <td>cell 4</td>
  </tr>
</table>
<br> 

<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myTable").rows[0].cells.length;
    document.getElementById("demo").innerHTML = "Found " + x + " cells in the first tr element.";
}
</script>

</body>
</html>

The code above is rendered as follows: