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

📅  最后修改于: 2021-11-25 04:20:37             🧑  作者: 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 行旁边的选择按钮时:

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