Javascript Reference - HTML DOM Table rows Collection

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

Browser Support

The rows collection is supported in all major browsers.


`rows`	Yes	Yes	Yes	Yes	Yes

Syntax

var v = tableObject.rows

Properties

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

Methods

Method	Description
[name_or_index]	Get element by index which starts at 0 or name
item(name_or_index)	Get the 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 show the number of rows in a table.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from  w  ww.j  a v  a  2 s .  com-->
    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>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("myTable").rows.length;
    document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to output the innerHTML of the first <tr> element in the table by [name_or_index] syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from   w  w w  . j  a v  a2s.  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].innerHTML);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to output the innerHTML of the first <tr> element in the table by using item(name_or_index) syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--  w w w  .ja va2 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.item(0).innerHTML);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to output the innerHTML of the <tr> element with id="myRow" in the table by using namedItem(name_or_id) syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from   w  ww . ja v a  2 s  . c o  m-->
    border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr id="myRow">
    <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.namedItem("myRow").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   www  .j  a v  a 2s  . c om-->
    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: