Easy Tutorial
❮ Prop Progress Position Prop Element Children ❯

Table rows Collection


Definition and Usage

The rows collection returns an array of all rows (TableRow objects) in the table, which is an HTMLCollection.

This collection includes all rows defined in <thead>, <tfoot>, and <tbody>.

Syntax

Properties

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

Methods

Method Description
[name_or_index] An integer specifying the element retrieval position (starting from 0)
item(name_or_index) Returns the element at the specified index in the collection
namedItem(name) Returns the element with the specified name in the collection

Browser Support

All major browsers support the rows collection.


Example

Display the number of rows in the table:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tutorialpro.org(tutorialpro.org)</title>
<script>
function displayResult(){
    alert(document.getElementById("myTable").rows.length);
}
</script>
</head>
<body>

<table id="myTable" border="1">
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
    </tr>
    <tr>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Display Number of Rows</button>

</body>
</html>

More Examples

Popup the content of the first row

Add a row

Align cell content in table rows

Vertical alignment of cell content in table rows

Align content of individual cells

Vertical alignment of cell content

Change the content of a table cell

Merge cells


❮ Prop Progress Position Prop Element Children ❯