Skip to content
Related Articles

Related Articles

How to send row data when clicking button using javascript?
  • Last Updated : 15 Sep, 2020
GeeksforGeeks - Summer Carnival Banner

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=
              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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :