Как показать содержимое выбранной строки таблицы в модели Bootstrap с помощью jQuery?

Опубликовано: 6 Января, 2022

Задача - извлечь данные из строки таблицы и отобразить их в модели начальной загрузки.

Модель начальной загрузки : Модальный компонент - это своего рода диалоговое окно или всплывающее окно, которое отображается в верхней части текущей страницы при нажатии соответствующей кнопки на странице. Однако модель автоматически закрывается при нажатии на фон модели. Более того, следует учитывать, что Bootstrap не содержит вложенных модалов, поскольку они ухудшают пользовательский интерфейс для пользователя. Следовательно, одновременно поддерживается только одно модальное окно.

Подход: нам предоставляются данные в виде таблицы HTML. В нашем коде мы используем jQuery для выполнения нашей задачи. Код jQuery помогает извлечь данные из строки таблицы и поместить их в тело модели начальной загрузки. Первоначально он находит расположение требуемых данных из таблицы с помощью метода find () . Он использует метод text () для извлечения текстового содержимого из местоположения и сохраняет его в различных переменных. Затем мы формируем строку, содержащую HTML-код, для отображения данных в теле модели. Метод empty () используется для очистки предварительно заполненных данных в теле модели. Метод append () используется для размещения строки в теле модели.

Код:

 <!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 > 

Выход:

При срабатывании кнопки выбора рядом с строкой 1:

При нажатии кнопки выбора рядом со строкой 2:

JQuery HTML Bootstrap

Как показать содержимое выбранной строки таблицы в модели Bootstrap с помощью jQuery?

РЕКОМЕНДУЕМЫЕ СТАТЬИ