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: