📌  相关文章
📜  如何使用jQuery在Bootstrap模型中显示表的选定行的内容?

📅  最后修改于: 2021-05-25 17:53:11             🧑  作者: Mango

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

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

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

代码:



    
        
        GFG User Details
        
        
        
        
        
        
        
        
    
  
    
        
            

GeeksForGeeks

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
GFG UserHandlePractice ProblemsCoding ScoreGFG ArticlesSELECT
User-115010030
User-21007530
User-32005010
User-45052                       
User-5000
        
                               

输出:

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

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