如何使用 jQuery 在 Bootstrap 模型中显示表格选定行的内容？

任务是从表的一行中获取数据并将它们显示在引导程序模型上。

Bootstrap 模型：Modal 组件是一种对话框或弹出窗口，在单击页面上提供的按钮时显示在当前页面的顶部。但是，模型会在单击模型的背景时自动关闭。此外，应该考虑到 Bootstrap 不包含嵌套模式，因为它们会为用户带来更糟糕的 UI 体验。因此，一次仅支持一个模态窗口。

方法：我们以 HTML 表格的形式获得数据。在我们的代码中，我们使用 jQuery 来完成我们的任务。 jQuery 代码有助于从表的行中获取数据并将其放置在引导模型的主体中。最初，它使用find()方法从表中找到所需数据的位置。它使用text()方法从该位置获取文本内容并将它们存储到不同的变量中。然后我们形成一个包含 HTML 代码的字符串来显示模型主体中的数据。 empty()方法用于清除模型体中的预填充数据。 append()方法用于将字符串放置在模型的主体中。

代码：

    
        
        GFG User Details
        
        
            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;
            }
        
        
        
        
      
        
      
        
      
        
      
    
  
    
        
            GeeksForGeeks
            
            
                
                    
                    
                    
                    
                    
                    
                
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
                
                    
                    
                    
                    
                    
                
            GFG UserHandlePractice ProblemsCoding ScoreGFG ArticlesSELECTUser-115010030
                      SELECTUser-21007530
                      SELECTUser-32005010
                      SELECTUser-45052
                      
                      SELECTUser-5000
                      SELECT
        
        
            $(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);
                });
            });
        
        
        
            
                
                    
                        
                        
                          Selected row
                        
                            
                              ×
                        
                    
                    
                    
                        
                        
         
                            
                              Close
                        
                    
                
            
        
    

输出：

在触发第 1 行旁边的选择按钮时：

在触发第 2 行旁边的选择按钮时：

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。