Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to send row data when clicking the button using javascript?
The table contains multiple rows, and every row contains multiple columns. Also, every column contains multiple HTML elements or texts.
Here, we will add the submit button on every table row, and based on the button click, we will access the row's data. We will use JavaScript and jQuery to access the row data, and after that, users can send it anywhere, wherever they want, using API, etc.
Use JavaScript to access row data
In this approach, we will access the first clicked element. We will find its parent element based on the clicked element, giving us a particular column. After that, we can find the column's parent, giving us a row. Next, we can access all columns of the row and its data.
Syntax
Users can follow the syntax below to access row data using JavaScript.
var clickedRow = clickedElement.parentNode.parentNode.id; var rowData = document.getElementById(clickedRow).querySelectorAll('.column-data'); let text = rowData[0].innerHTML;
In the above syntax, clickedRow contains the id of the row in which the button is clicked. The rowData contains all columns of a particular row. After that, we can access every column from the array and can use the innerHTML property to access the HTML of the column.
Example
In the example below, we have created the table and added students’ information to the table. We have also added the submit column in the table; every row contains the submit button.
In JavaScript, we have added the click event listener to every button, and when the user clicks the above, it accesses the row of the clicked element. After that, it accesses all columns of the row.
In the output, users can observe the data of clicked row.
<html>
<body>
<h2>Accessing the <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', () => {
var clickedElement = event.target
var clickedRow = clickedElement.parentNode.parentNode.id;
var rowData = document.getElementById(clickedRow).querySelectorAll('.columndata');
let Student_name = rowData[0].innerHTML;
let course = rowData[1].innerHTML;
let year = rowData[2].innerHTML;
let output = document.getElementById('output');
output.innerHTML = "The submited row data are : <br>";
output.innerHTML += `name - ${Student_name}, course - ${course}, Graduation year - ${year}`;
});
}
</script>
</body>
</html>
Use JQuery to access row data
In JQuery, we can detect the click event on the input and use the closest() method to find the closest row to the clicked input. After that, we can access every column of the row using JQuery.
Syntax
Users can follow the syntax below to use JQuery to access the data of clicked row.
$(".inp").click(function () { var $row = $(this).closest("tr"); var $text = $row.find(".class").text(); });
In the above syntax, we used the closest() method by passing ‘tr’ as a parameter to find the nearest table row. After that, we used the find() and text() methods to get the text of the particular column.
Example
In the example below, we have created the table containing the various house’s information. When the user clicks the ‘submit data’ button input of any row, it accesses the row data and shows it on the screen.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="noreferrer"></script>
</head>
<body>
<h2>Accessing the <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 submited are : <br> Area - ${$Area}, color - ${$color}, Total Rooms - ${$room}`);
});
</script>
</body>
</html>
We have seen two approaches to accessing the clicked table row’s data. Users can manipulate the data to send to the application's backend or request data from other resources.
In the first approach, we get all columns of the row in the array format. In the second approach, we need to access every column separately using the class name or other identifiers. Also, users can manipulate both approaches further using various JavaScript methods.
7K+ Views
