jQuery Get Table Row Data Onclick
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Ashish
In this article we will show you the solution of jQuery get table row data onclick, popular JavaScript library jQuery makes web development easier by offering a variety of tools and functions. Data retrieval from HTML tables is one of jQuery's most frequently utilised features.
By using the "click" event to record when a user clicks on a table row and jQuery to extract the data from that row, this capability may be accomplished.
Although getting table row data on click is a fairly simple process, understanding jQuery syntax and HTML structure is necessary.
Developers may quickly access the data in the table and alter it as necessary by using jQuery selectors. For web applications that involve user input and data management, this functionality is especially helpful.
Step By Step Guide On jQuery Get Table Row Data Onclick :-
<!DOCTYPE html>
<html>
<head>
<title>Get Table Row Data OnClick using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('table tr').click(function(){
var col1 = $(this).find('td:eq(0)').text();
var col2 = $(this).find('td:eq(1)').text();
var col3 = $(this).find('td:eq(2)').text();
alert("You clicked row with values: " + col1 + ", " + col2 + ", " + col3);
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1.1</td>
<td>Value 1.2</td>
<td>Value 1.3</td>
</tr>
<tr>
<td>Value 2.1</td>
<td>Value 2.2</td>
<td>Value 2.3</td>
</tr>
<tr>
<td>Value 3.1</td>
<td>Value 3.2</td>
<td>Value 3.3</td>
</tr>
</tbody>
</table>
</body>
</html>
- You can see that we have written the code here for Jquery to retrieve table row data upon click.
- We build an HTML file with a table that has three columns & three rows, as well as a script that uses jQuery to obtain information from a particular table row.
- The script begins by awaiting the completion of the HTML document's loading and its readiness for manipulation.
- The $(document).ready() function is used for this.
- Each row (tr>) in the table is given a click event listener by the script after the document is complete. The jQuery selector $('table tr') is used for this.
- The event listener is activated and the code is executed when a row is clicked.
- Find() is used to choose the three columns in the row, one at a time, with $(this) denoting the clicked row.
- Each column is selected by its index using the eq() function: eq(0) selects the first column, eq(1) selects the second, and so on.
- Each selected column's text content is retrieved and saved in a variable (col1, col2, and col3) using the text() function.
- The row that was clicked and the information it contains are then indicated by an alert message that includes the values of col1, col2, and col3, which is shown.
- An alert indicating the values of the three columns in that row appears when the user clicks on a row in the table.
Conclusion :-
As a result, the concept behind jQuery's obtain table row data onclick seemed clear to us.
We also discovered that the code targets all of the tr elements inside of the table element and watches for a click event by using jQuery selectors & the click() event.
When a row is clicked, the code searches for the text content of each td element within that row and shows an alert with the values.
I hope this article on jQuery get table row data onclick helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
