如何用jQuery显示Bootstrap模型中选定的表格行的内容
任务是从表格的某一行中获取数据,并在bootstrap模型上显示它们。
Bootstrap模型模板组件是一种对话框或弹出式窗口,在点击页面上提供的按钮时,会显示在当前页面的顶部。然而,模型在点击模型的背景时自动关闭。此外,应该考虑到Bootstrap不支持嵌套模态,因为它们会给用户带来更糟糕的UI体验。因此,每次只支持一个模态窗口。
方法:我们得到的数据是一个HTML表格的形式。在我们的代码中,我们使用jQuery来完成我们的任务。jQuery代码有助于从表格的行中获取数据,并将其放置在bootstrap模型的主体中。首先,它使用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是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。
版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com