How to send row data when clicking button using JavaScript ? Last Updated : 19 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Sending row data when clicking a button using JavaScript refers to capturing data from a specific table row (or similar structure) when a button within that row is clicked. This data can then be processed or sent to a server for further actions, like form submission.Approach:HTML Table Structure: Each <tr> contains row data using data-name and data-email attributes, along with an action button for interaction.JavaScript Function: The handleButtonClick function handles the button click and retrieves row data from the associated <tr> element.Button Event Handling: The button uses the onclick attribute to call handleButtonClick, passing this to identify the clicked button's row.Data Retrieval: The handleButtonClick function accesses data-name and data-email via the dataset property of the clicked row's <tr>.Data Processing: The function logs the row data, simulating data handling. This can be replaced with real server communication logic.Example: This example shows the above-explained approach. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Send Row Data Example</title> </head> <body> <table border="1"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Action</th> </tr> </thead> <tbody> <tr data-name="John Doe" data-email="[email protected]"> <td>John Doe</td> <td>[email protected]</td> <td><button onclick="handleButtonClick(this)"> Send Data </button> </td> </tr> <!-- Add more rows as needed --> </tbody> </table> <script> function handleButtonClick(button) { // Accessing row data using the data-* attributes const name = button.parentNode.parentNode.dataset.name; const email = button.parentNode.parentNode.dataset.email; // Simulate sending data (you can perform an AJAX request here) console.log(`Sending data: Name - ${name}, Email - ${email}`); } </script> </body> </html> Output: Comment More infoAdvertise with us Next Article How to get form data using JavaScript/jQuery? R riyakalra59 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to make HTML table expand on click using JavaScript ? The expandable table can be achieved by using JavaScript with HTML. By Clicking on a row of the table, it expands and a sub-table pops up. When the user again clicks on that row the content will hide. This can be very useful when the data is complex but it is inter-related.Example 1: The following e 5 min read How to get form data using JavaScript/jQuery? The serializeArray() method creates an array of objects (name and value) by serializing form values. This method can be used to get the form data. Syntax: $(selector).serializeArray() Parameter: It does not accept any parameter. Return Value: It returns all the value that is inside the inputs fields 1 min read How to add more values to array on button click using PHP ? In this article, we will learn to add elements to an existing array with the click of a button using PHP. PHP is a server-side language, and it only responds to requests (GET, POST, PUT, PATCH, and DELETE). The button click action happens as a part of the client-side to directly call a PHP function. 3 min read How to Generate/Send JSON Data at the Client Side ? Javascript Object Notation (JSON) is a widely used format for sending and receiving data to or from the server. In this article, we will use fetch API to send and receive data from the NodeJS server. Advantages of JSON: Because of its easy and small syntax, it executes the response in a faster way. 3 min read How to load data from JavaScript array using jQuery DataTables plugin ? DataTables are a modern jQuery plugin for adding interactive and advanced controls to HTML tables for our webpages. It is a simple-to-use plug-in with a huge range of options for the developer's custom changes. The common features of the DataTable plugin are paging, multiple column ordering, sorting 2 min read How to send data from client side to Node.js server using Ajax without page reloading ? In this article, we are learning about how can we send data to a node server using Ajax without reloading the page from the client-side.Approach: We are creating a button in HTML document on the client-side when the button is pressed a request is made on our node server and the object is received at 2 min read Like