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
How to Access element from Table using JavaScript?
To access table elements using JavaScript, you can use methods like document.getElementById() or document.getElementsByTagName() to select the table, then access individual rows and cells. This article demonstrates how to access table rows and create an interactive hover effect.
Basic Table Access Methods
JavaScript provides several ways to access table elements:
By ID:
document.getElementById('tableId')- Access a specific tableBy Tag Name:
document.getElementsByTagName('tr')- Access all table rowsTable Properties: Use
table.rowsortable.childNodesto access rows
Example: Interactive Table with Hover Effect
Let's create a table where rows highlight when you hover over them. First, here's the basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>Access Table Elements</title>
<style type="text/css">
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ccc;
}
table {
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<table id="my_table">
<tr>
<th>Player</th>
<th>Country</th>
<th>Role</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>Middle Order Batsman</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>Australia</td>
<td>Middle Order Batsman</td>
</tr>
<tr>
<td>Jofra Archer</td>
<td>England</td>
<td>Opening Fast Bowler</td>
</tr>
<tr>
<td>Rashid Khan</td>
<td>Afghanistan</td>
<td>Spin All-Rounder</td>
</tr>
</table>
</body>
</html>
Adding JavaScript Functionality
Now let's add JavaScript to make the table interactive. We'll access table rows and add hover effects:
<!DOCTYPE html>
<html>
<head>
<title>Interactive Table Elements</title>
<style type="text/css">
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table {
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<table id="my_table">
<tr>
<th>Player</th>
<th>Country</th>
<th>Role</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>India</td>
<td>Middle Order Batsman</td>
</tr>
<tr>
<td>Steve Smith</td>
<td>Australia</td>
<td>Middle Order Batsman</td>
</tr>
<tr>
<td>Jofra Archer</td>
<td>England</td>
<td>Opening Fast Bowler</td>
</tr>
<tr>
<td>Rashid Khan</td>
<td>Afghanistan</td>
<td>Spin All-Rounder</td>
</tr>
</table>
<script>
// Method 1: Access all table rows
const tableRows = document.getElementsByTagName('tr');
// Start from index 1 to skip the header row
for (let i = 1; i < tableRows.length; i++) {
// Add mouseover event listener
tableRows[i].addEventListener('mouseover', function() {
this.style.backgroundColor = '#f0f0f0';
});
// Add mouseleave event listener
tableRows[i].addEventListener('mouseleave', function() {
this.style.backgroundColor = '';
});
}
</script>
</body>
</html>
Alternative Methods to Access Table Elements
Here are different approaches to access table elements:
<script>
// Method 1: Using getElementsByTagName
const allRows = document.getElementsByTagName('tr');
// Method 2: Using querySelectorAll for more specific selection
const dataRows = document.querySelectorAll('#my_table tr:not(:first-child)');
// Method 3: Access table by ID, then get rows
const table = document.getElementById('my_table');
const rows = table.rows; // HTMLCollection of all rows
// Method 4: Access specific cells
const firstDataRow = table.rows[1]; // Second row (index 1)
const firstCell = firstDataRow.cells[0]; // First cell in that row
console.log('Total rows:', table.rows.length);
console.log('First player:', firstCell.textContent);
</script>
How the Code Works
Element Selection:
getElementsByTagName('tr')returns all table rows as an HTMLCollectionEvent Listeners: We attach
mouseoverandmouseleaveevents to each data rowDynamic Styling: The background color changes when hovering and resets when the mouse leaves
Header Exclusion: Starting the loop from index 1 skips the header row
Common Use Cases
Data Highlighting: Emphasize rows on hover for better user experience
Row Selection: Allow users to click and select table rows
Dynamic Content: Add, remove, or modify table data programmatically
Form Integration: Extract data from table cells for form submission
Conclusion
Accessing table elements in JavaScript is straightforward using methods like getElementsByTagName() and getElementById(). Combined with event listeners, you can create interactive tables that respond to user actions and enhance the overall user experience.
13K+ Views
