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 send row data when clicking the button using javascript?
When working with HTML tables, you often need to access row data when a user clicks a button. This is useful for editing, deleting, or sending data to a server. We'll explore two methods: vanilla JavaScript and jQuery.
Using JavaScript to Access Row Data
In this approach, we access the clicked button element, traverse up to find its parent row, then extract all column data from that row.
Syntax
var clickedRow = clickedElement.parentNode.parentNode.id;
var rowData = document.getElementById(clickedRow).querySelectorAll('.column-data');
let text = rowData[0].innerHTML;
The clickedRow contains the row ID, rowData contains all columns, and we can access individual columns using array indexing.
Example
Below is a student information table where each row has a submit button. When clicked, it displays the row's data:
<html>
<body>
<h2>Accessing <i>row data of table</i> using JavaScript</h2>
<table class="table">
<tbody>
<tr>
<th>Sr. NO</th>
<th>Student Name</th>
<th>Course</th>
<th>Graduation Year</th>
<th>Submit Data</th>
</tr>
<tr id="row1">
<th>1</th>
<td class="column-data">Shubham</td>
<td class="column-data">CSE</td>
<td class="column-data">2023</td>
<td><input type="button" value="Submit Data" class="inp"/></td>
</tr>
<tr id="row2">
<th>2</th>
<td class="column-data">Alice</td>
<td class="column-data">CSE</td>
<td class="column-data">2022</td>
<td><input type="button" value="Submit Data" class="inp"/></td>
</tr>
<tr id="row3">
<th>3</th>
<td class="column-data">Bob</td>
<td class="column-data">B.SC. Maths</td>
<td class="column-data">2021</td>
<td><input type="button" value="Submit Data" class="inp"/></td>
</tr>
<tr id="row4">
<th>4</th>
<td class="column-data">Jems</td>
<td class="column-data">EC</td>
<td class="column-data">2025</td>
<td><input type="button" value="Submit Data" class="inp"/></td>
</tr>
</tbody>
</table>
<div id="output"></div>
<script>
let allButtons = document.getElementsByClassName('inp');
for (let button of allButtons) {
button.addEventListener('click', (event) => {
var clickedElement = event.target;
var clickedRow = clickedElement.parentNode.parentNode.id;
var rowData = document.getElementById(clickedRow).querySelectorAll('.column-data');
let studentName = rowData[0].innerHTML;
let course = rowData[1].innerHTML;
let year = rowData[2].innerHTML;
let output = document.getElementById('output');
output.innerHTML = "The submitted row data are: <br>";
output.innerHTML += `Name - ${studentName}, Course - ${course}, Graduation Year - ${year}`;
});
}
</script>
</body>
</html>
Using jQuery to Access Row Data
jQuery provides a cleaner approach using the closest() method to find the parent row and find() to locate specific columns.
Syntax
$(".inp").click(function () {
var $row = $(this).closest("tr");
var $text = $row.find(".class").text();
});
The closest("tr") finds the nearest table row, and find() with text() extracts column content.
Example
Here's a house information table demonstrating jQuery's approach:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<h2>Accessing <i>row data of table</i> using jQuery</h2>
<table class="table">
<tbody>
<tr>
<th>House No.</th>
<th>Area</th>
<th>Color</th>
<th>Rooms</th>
<th>Submit</th>
</tr>
<tr id="rowA">
<th>A</th>
<td class="column-data1">3600 Sq. feet</td>
<td class="column-data2">Aqua</td>
<td class="column-data3">4</td>
<td><input type="button" value="Submit Data" class="inp"/></td>
</tr>
<tr id="rowB">
<th>B</th>
<td class="column-data1">2500 Sq. feet</td>
<td class="column-data2">Pink</td>
<td class="column-data3">3</td>
<td><input type="button" value="Submit Data" class="inp"/></td>
</tr>
<tr id="rowC">
<th>C</th>
<td class="column-data1">1500 Sq. feet</td>
<td class="column-data2">Blue</td>
<td class="column-data3">2</td>
<td><input type="button" value="Submit Data" class="inp"/></td>
</tr>
<tr id="rowD">
<th>D</th>
<td class="column-data1">500 Sq. feet</td>
<td class="column-data2">Grey</td>
<td class="column-data3">5</td>
<td><input type="button" value="Submit Data" class="inp"/></td>
</tr>
</tbody>
</table>
<div id="output"></div>
<script>
$(".inp").click(function () {
var $row = $(this).closest("tr");
var $area = $row.find(".column-data1").text();
var $color = $row.find(".column-data2").text();
var $room = $row.find(".column-data3").text();
$('#output').html(`The values submitted are: <br> Area - ${$area}, Color - ${$color}, Total Rooms - ${$room}`);
});
</script>
</body>
</html>
Comparison
| Method | Dependencies | Code Length | Browser Support |
|---|---|---|---|
| Vanilla JavaScript | None | Longer | All modern browsers |
| jQuery | jQuery library | Shorter, cleaner | All browsers (with jQuery) |
Key Points
Both approaches allow you to extract row data and send it to APIs or process it further. The JavaScript method returns data as an array, while jQuery requires accessing each column individually. Choose based on your project's existing dependencies and complexity requirements.
Conclusion
Both vanilla JavaScript and jQuery provide effective ways to capture table row data on button clicks. Use JavaScript for dependency-free solutions or jQuery for cleaner, more readable code when the library is already included.
9K+ Views
