How to show contents of selected row of a table in Bootstrap model using jQuery ?

Last Updated : 03 Aug, 2021

The task is to fetch data from a row of the table and show them on the bootstrap model.

Bootstrap model: The Modal component is a kind of dialog box or a popup window that is displayed on top of the present page, on clicking the provided button on the page. However, the Model automatically closes on clicking the model’s backdrop. Moreover, it should be taken into consideration that Bootstrap doesn’t hold nested modals as they generate worse UI experience for the user. Hence, only one modal window is supported at a time.

Approach: We are given data in the form of an HTML table. In our code, we are using jQuery to complete our task. The jQuery code helps to fetch the data from the row of the table and to place it in the body of the bootstrap model. Initially, it finds the location of the required data from the table using find() method. It uses the text() method to fetch textual content from the location and stores them into different variables. Then we form a string containing HTML code to display the data in the body of the model. The empty() method is used to clear the prefilled data in the model body. The append() method is used to place the string in the body of the model.

Code:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <title>GFG User Details</title> 
        <!-- CSS FOR STYLING THE PAGE -->
        <style> 
            table { 
                margin: 0 auto; 
                font-size: large; 
                border: 1px solid black; 
            } 
  
            h1 { 
                text-align: center; 
                color: #006600; 
                font-size: xx-large; 
                font-family: "Gill Sans", 
                  "Gill Sans MT",  
                  " Calibri",  
                  "Trebuchet MS", 
                  "sans-serif"; 
            } 
  
            td { 
                background-color: #e4f5d4; 
                border: 1px solid black; 
            } 
  
            th, 
            td { 
                font-weight: bold; 
                border: 1px solid black; 
                padding: 10px; 
                text-align: center; 
            } 
  
            td { 
                font-weight: lighter; 
            } 
        </style> 
        <!-- BOOTSTRAP CSS AND PLUGINS-->
        <link rel="stylesheet"
              href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
              integrity= 
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
              crossorigin="anonymous" /> 
        <script src= 
"https://code.jquery.com/jquery-3.2.1.slim.min.js" 
                integrity= 
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
                crossorigin="anonymous"> 
      </script> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
                integrity= 
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
                crossorigin="anonymous"> 
      </script> 
        <script src= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
                integrity= 
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous"> 
      </script> 
        <script src= 
"https://code.jquery.com/jquery-3.5.1.js"
                integrity= 
"sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
                crossorigin="anonymous"> 
      </script> 
    </head> 
  
    <body> 
        <section> 
            <h1>GeeksForGeeks</h1> 
            <!-- TABLE CONSTRUCTION-->
            <table id="GFGtable"> 
                <tr> 
                    <!-- TABLE HEADING -->
                    <th>GFG UserHandle</th> 
                    <th>Practice Problems</th> 
                    <th>Coding Score</th> 
                    <th>GFG Articles</th> 
                    <th>SELECT</th> 
                </tr> 
                <!-- TABLE DATA -->
                <tr> 
                    <td class="gfgusername">User-1</td> 
                    <td class="gfgpp">150</td> 
                    <td class="gfgscores">100</td> 
                    <td class="gfgarticles">30</td> 
                    <td><button class="gfgselect bg-secondary"
                                data-toggle="modal" 
                                data-target="#gfgmodal"> 
                      SELECT</button></td> 
                </tr> 
                <tr> 
                    <td class="gfgusername">User-2</td> 
                    <td class="gfgpp">100</td> 
                    <td class="gfgscores">75</td> 
                    <td class="gfgarticles">30</td> 
                    <td><button class="gfgselect bg-secondary" 
                                data-toggle="modal" 
                                data-target="#gfgmodal"> 
                      SELECT</button></td> 
                </tr> 
                <tr> 
                    <td class="gfgusername">User-3</td> 
                    <td class="gfgpp">200</td> 
                    <td class="gfgscores">50</td> 
                    <td class="gfgarticles">10</td> 
                    <td><button class="gfgselect bg-secondary"
                                data-toggle="modal"
                                data-target="#gfgmodal"> 
                      SELECT</button></td> 
                </tr> 
                <tr> 
                    <td class="gfgusername">User-4</td> 
                    <td class="gfgpp">50</td> 
                    <td class="gfgscores">5</td> 
                    <td class="gfgarticles">2</td> 
                    <td> 
                      <button class="gfgselect bg-secondary"
                                data-toggle="modal"
                                data-target="#gfgmodal"> 
                      SELECT</button></td> 
                </tr> 
                <tr> 
                    <td class="gfgusername">User-5</td> 
                    <td class="gfgpp">0</td> 
                    <td class="gfgscores">0</td> 
                    <td class="gfgarticles">0</td> 
                    <td><button class="gfgselect bg-secondary" 
                                data-toggle="modal"
                                data-target="#gfgmodal"> 
                      SELECT</button></td> 
                </tr> 
            </table> 
        </section> 
        <script> 
            $(function () { 
                // ON SELECTING ROW 
                $(".gfgselect").click(function () { 
   //FINDING ELEMENTS OF ROWS AND STORING THEM IN VARIABLES 
                    var a = 
             $(this).parents("tr").find(".gfgusername").text(); 
                    var c = 
             $(this).parents("tr").find(".gfgpp").text(); 
                    var d = 
             $(this).parents("tr").find(".gfgscores").text(); 
                    var e =  
             $(this).parents("tr").find(".gfgarticles").text(); 
                    var p = ""; 
                    // CREATING DATA TO SHOW ON MODEL 
                    p +=  
              "<p id='a' name='GFGusername' >GFG UserHandle: " 
                      + a + " </p>"; 
                    
                    p += 
              "<p id='c' name='GFGpp'>Practice Problems: "  
                      + c + "</p>"; 
                    p +=  
              "<p id='d' name='GFGscores' >Coding Score: " 
                      + d + " </p>"; 
                    p +=  
              "<p id='e' name='GFGcoding' >GFG Article: " 
                      + e + " </p>"; 
                    //CLEARING THE PREFILLED DATA 
                    $("#divGFG").empty(); 
                    //WRITING THE DATA ON MODEL 
                    $("#divGFG").append(p); 
                }); 
            }); 
        </script> 
        <!-- CREATING BOOTSTRAP MODEL -->
        <div class="modal fade" 
             id="gfgmodal"
             tabindex="-1"
             role="dialog"> 
            <div class="modal-dialog"> 
                <div class="modal-content"> 
                    <div class="modal-header"> 
                        <!-- MODEL TITLE -->
                        <h2 class="modal-title"
                            id="gfgmodallabel"> 
                          Selected row</h2> 
                        <button type="button" 
                                class="close"
                                data-dismiss="modal" 
                                aria-label="Close"> 
                            <span aria-hidden="true"> 
                              ×</span> 
                        </button> 
                    </div> 
                    <!-- MODEL BODY -->
                    <div class="modal-body"> 
                        <div class="GFGclass" 
                             id="divGFG"></div> 
                        <div class="modal-footer"> 
         <!-- The close button in the bottom of the modal -->
                            <button type="button"
                                    class="btn btn-secondary" 
                                    data-dismiss="modal"> 
                              Close</button> 
                        </div> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </body> 
</html> 

Output:

On triggering select button beside row 1:

On triggering select button beside row 2:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

Suggest improvement

How to select all even/odd rows in table using jQuery ?

Share your thoughts in the comments

How to show contents of selected row of a table in Bootstrap model using jQuery ?

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?