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

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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Misc
Bootstrap
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
How to change the background color of the active nav-item?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property