How to send row data when clicking button using javascript?

15 Sep, 2020
In this article we will learn how to send and access row data when clicking a button using JavaScript.
The below example contains  a simple Bootstrap table. Each table row (<tr>) has an id and a submit button. When the button corresponding to a row is clicked, the row’s data is displayed using alert. 
Approach:
We get the row id of the row whose button was clicked using “event.target.parentNode.parentNode.id”. Here, “event.targent” returns the element that triggered the event (clicking the button), which in this case is <input>.  “event.target.parentNode” refers to parent of <input>, that is <td>.  “event.target.parentNode.parentNode()” refers to the parent of <td>, that is <tr>. Therefore, var rowId stores id of the row whose button was clicked.
Now we want to access the data inside this particular row. All data elements have class=”row-data”. “document.getElementById(rowId).querySelectorAll(“.row-data”) ” returns an array of all elements with “row-data” class inside the element (row) whose id is given by rowId. The array is stored in var “data” variable. We can access the data using data[0].innerHTML (name) and so on.
Solution:
<!DOCTYPE html><html>    <head>        <link rel="stylesheet"              href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"               integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"              crossorigin="anonymous" />    </head>      <body>        <!-- Bootstrap table -->        <table class="table">            <tbody>                <tr>                    <th scope="col">#</th>                    <th scope="col">Name</th>                    <th scope="col">Age</th>                    <th scope="col">Submit</th>                </tr>                  <tr id="1">                    <th scope="row">1</th>                    <td class="row-data">Sara</td>                    <td class="row-data">23</td>                    <td><input type="button"                                value="submit"                                onclick="show()" /></td>                </tr>                  <tr id="2">                    <th scope="row">2</th>                    <td class="row-data">John</td>                    <td class="row-data">30</td>                    <td><input type="button"                                value="submit"                                onclick="show()" /></td>                </tr>                  <tr id="3">                    <th scope="row">3</th>                    <td class="row-data">Naman</td>                    <td class="row-data">20</td>                    <td><input type="button"                                value="submit"                                onclick="show()" /></td>                </tr>            </tbody>        </table>          <script>            function show() {                var rowId =                     event.target.parentNode.parentNode.id;              //this gives id of tr whose button was clicked                var data =  document.getElementById(rowId).querySelectorAll(".row-data");               /*returns array of all elements with               "row-data" class within the row with given id*/                  var name = data[0].innerHTML;                var age = data[1].innerHTML;                  alert("Name: " + name + "\nAge: " + age);            }        </script>    </body></html>
Output before button click:
Output after clicking 3rd button:
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.