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

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:

filter_none

edit
close

play_arrow

link
brightness_4
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=
              integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 
              crossorigin="anonymous" />
        <script src=
                integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
                crossorigin="anonymous">
      </script>
        <script src=
                integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
                crossorigin="anonymous">
      </script>
        <script src=
                integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
                crossorigin="anonymous">
      </script>
        <script src=
                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>

chevron_right


Output:



On triggering select button beside row 1:

On triggering select button beside row 2:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.