Javascript Reference - HTML DOM Table cells Collection

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

Browser Support


`cells`	Yes	Yes	Yes	Yes	Yes

Syntax

var v = 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 index starting at 0 or name
item(name_or_index)	Get the element from the collection ny index/name/id
namedItem(name_or_id)	Get the element from the collection by the by name or id attribute

Example

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


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  www .j a v a 2s  .  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 output 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 {<!-- w  w w  .j av  a 2  s.  co  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 output 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 www .j  a v  a  2s.com-->
    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 5

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.  j  a  v  a  2  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 6

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


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  w  w  w  .ja  va2  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: