Javascript Reference - HTML DOM Table rows Collection

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

Browser Support


`rows`	Yes	Yes	Yes	Yes	Yes

Syntax

tableObject.rows

Properties

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

Methods

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

Example

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


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from  ww  w.jav a  2s  .  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>
<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 2

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


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from   w  ww  .j  av a 2  s.  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() {
    console.log(document.getElementById("myTable").rows.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 <tr> element with id="myRow" in the table using namedItem(name_or_id) syntax.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from w  w  w.  j  a v a2  s . c  om-->
    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 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.  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>
<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 rows in a table.


<!DOCTYPE html>
<html>
<head>
<style>
table, td {<!--from  ww w.  ja  va 2 s  .co  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.length;
    document.getElementById("demo").innerHTML = "Found " + x + " tr elements in the table.";
}
</script>

</body>
</html>

The code above is rendered as follows: