Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Table rows Collection
The HTML DOM Table rows Collection returns a collection of all <tr> elements in a table. This collection provides access to table rows for manipulation, counting, and retrieval operations using JavaScript.
Syntax
Following is the syntax to access the rows collection −
tableObject.rows
Where tableObject is a reference to a <table> element obtained through methods like document.getElementById() or document.querySelector().
Properties of rows Collection
The rows collection provides the following property to get information about the table rows −
| Property | Description |
|---|---|
length |
Returns the number of <tr> elements in the collection. This includes all rows from <thead>, <tbody>, and <tfoot> sections. |
Methods of rows Collection
The rows collection provides several methods to access individual table row elements −
| Method | Description |
|---|---|
[index] |
Returns the <tr> element at the specified index position. Index starts from 0. |
item(index) |
Returns the <tr> element at the specified index position. Alternative to bracket notation. |
namedItem(id) |
Returns the <tr> element with the specified id attribute value. |
Example − Getting Row Count
Following example demonstrates how to get the total number of rows in a table using the length property −
<!DOCTYPE html>
<html>
<head>
<title>Table Rows Collection - Length</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Student Information</h2>
<table id="studentTable" border="1" style="margin: 0 auto; border-collapse: collapse;">
<thead>
<tr>
<th style="padding: 8px;">Name</th>
<th style="padding: 8px;">Roll No.</th>
<th style="padding: 8px;">Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 8px;">John</td>
<td style="padding: 8px;">071717</td>
<td style="padding: 8px;">A</td>
</tr>
<tr>
<td style="padding: 8px;">Jane</td>
<td style="padding: 8px;">031717</td>
<td style="padding: 8px;">B+</td>
</tr>
<tr>
<td style="padding: 8px;">Mike</td>
<td style="padding: 8px;">041818</td>
<td style="padding: 8px;">A-</td>
</tr>
</tbody>
</table>
<button onclick="getRowCount()" style="margin: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer;">Get Number of Rows</button>
<p id="result" style="font-size: 18px; color: #333;"></p>
<script>
function getRowCount() {
var table = document.getElementById('studentTable');
var rowCount = table.rows.length;
document.getElementById('result').innerHTML = 'Total number of rows: ' + rowCount;
}
</script>
</body>
</html>
The output shows the table with a button that displays the total row count when clicked −
Student Information Name Roll No. Grade John 071717 A Jane 031717 B+ Mike 041818 A- [Get Number of Rows] Total number of rows: 4
Example − Accessing Individual Rows
Following example shows how to access individual rows using index and display their content −
<!DOCTYPE html>
<html>
<head>
<title>Table Rows Collection - Access by Index</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table id="dataTable" border="1" style="border-collapse: collapse; margin-bottom: 20px;">
<tr id="header">
<th style="padding: 10px; background-color: #f0f0f0;">Product</th>
<th style="padding: 10px; background-color: #f0f0f0;">Price</th>
</tr>
<tr>
<td style="padding: 8px;">Laptop</td>
<td style="padding: 8px;">$999</td>
</tr>
<tr id="phone-row">
<td style="padding: 8px;">Phone</td>
<td style="padding: 8px;">$599</td>
</tr>
</table>
<button onclick="accessRows()" style="padding: 10px 15px; margin-right: 10px;">Access Rows by Index</button>
<button onclick="accessById()" style="padding: 10px 15px;">Access Row by ID</button>
<div id="output" style="margin-top: 20px; padding: 10px; background-color: #f9f9f9;"></div>
<script>
function accessRows() {
var table = document.getElementById('dataTable');
var output = '';
// Access first row using bracket notation
var firstRow = table.rows[0];
output += 'First row content: ' + firstRow.cells[0].innerHTML + ', ' + firstRow.cells[1].innerHTML + '<br>';
// Access second row using item() method
var secondRow = table.rows.item(1);
output += 'Second row content: ' + secondRow.cells[0].innerHTML + ', ' + secondRow.cells[1].innerHTML;
document.getElementById('output').innerHTML = output;
}
function accessById() {
var table = document.getElementById('dataTable');
// Access row by id using namedItem()
var phoneRow = table.rows.namedItem('phone-row');
var output = 'Phone row content: ' + phoneRow.cells[0].innerHTML + ', ' + phoneRow.cells[1].innerHTML;
document.getElementById('output').innerHTML = output;
}
</script>
</body>
</html>
This example demonstrates accessing rows by index and by ID. Clicking the buttons shows different ways to retrieve row data −
Product Price Laptop $999 Phone $599 [Access Rows by Index] [Access Row by ID] First row content: Product, Price Second row content: Laptop, $999
Example − Iterating Through All Rows
Following example shows how to iterate through all table rows and highlight them dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Table Rows Collection - Iteration</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table id="employeeTable" border="1" style="border-collapse: collapse; margin-bottom: 20px;">
<tr style="background-color: #f0f0f0;">
<th style="padding: 10px;">Employee</th>
<th style="padding: 10px;">Department</th>
<th style="padding: 10px;">Salary</th>
</tr>
<tr>
<td style="padding: 8px;">Alice</td>
<td style="padding: 8px;">Engineering</td>
<td style="padding: 8px;">$75000</td>
</tr>
<tr>
<td style="padding: 8px;">Bob</td>
<td style="padding: 8px;">Marketing</td>
<td style="padding: 8px;">$65000</td>
</tr>
<tr>
<td style="padding: 8px;">Carol</td>
<td style="padding: 8px;">Finance</td>
<td style="padding: 8px;">$70000</td>
</tr>
</table>
<button onclick="highlightRows()" style="padding: 10px 15px; margin-right: 10px;">Highlight Data Rows</button>
<button onclick="resetHighlight()" style="padding: 10px 15px;">Reset Highlight</button>
<script>
function highlightRows() {
var table = document.getElementById('employeeTable');
// Skip header row (index 0) and highlight data rows
for(var i = 1; i < table.rows.length; i++) {
table.rows[i].style.backgroundColor = '#ffffcc';
}
}
function resetHighlight() {
var table = document.getElementById('employeeTable');
// Reset background color for all data rows
for(var i = 1; i < table.rows.length; i++) {
table.rows[i].style.backgroundColor = '';
}
}
</script>
</body>
</html>
This example highlights all data rows (excluding the header) when the highlight button is clicked −
Employee Department Salary Alice Engineering $75000 Bob Marketing $65000 Carol Finance $70000 [Highlight Data Rows] [Reset Highlight] (Data rows become highlighted with yellow background)
Key Points
The
rowscollection includes all<tr>elements from<thead>,<tbody>, and<tfoot>sections.Row indices start from 0, with the first row being
table.rows[0].The
lengthproperty provides the total count of rows in the table.Use
namedItem()only when rows have uniqueidattributes assigned.The collection is live, meaning it updates automatically when rows are added or removed from the table.
Conclusion
The HTML DOM Table rows Collection provides essential methods and properties for accessing and manipulating table rows. It offers flexible ways to retrieve rows by index, ID, or through iteration, making it useful for dynamic table operations and data processing in web applications.
430 Views
