The task is to fetch data from a row of the table and show them on the bootstrap model.
Bootstrap model: The Modal component is a kind of dialog box or a popup window that is displayed on top of the present page, on clicking the provided button on the page. However, the Model automatically closes on clicking the model’s backdrop. Moreover, it should be taken into consideration that Bootstrap doesn’t hold nested modals as they generate worse UI experience for the user. Hence, only one modal window is supported at a time.
Approach: We are given data in the form of an HTML table. In our code, we are using jQuery to complete our task. The jQuery code helps to fetch the data from the row of the table and to place it in the body of the bootstrap model. Initially, it finds the location of the required data from the table using find() method. It uses the text() method to fetch textual content from the location and stores them into different variables. Then we form a string containing HTML code to display the data in the body of the model. The empty() method is used to clear the prefilled data in the model body. The append() method is used to place the string in the body of the model.
On triggering select button beside row 1:
On triggering select button beside row 2:
- How to add table row in a table using jQuery?
- How to remove table row from table using jQuery ?
- How to make whole row in a table clickable as link in Bootstrap ?
- How to make Bootstrap table with sticky table head?
- How to select the last row of a table using jQuery ?
- How to insert new row at a certain index in a table in jQuery ?
- How to hide or show one record from an ng-repeat within a table based on ng-click?
- jQuery | contents() with Examples
- How to change selected value of a drop-down list using jQuery?
- How to know which radio button is selected using jQuery?
- How to get selected text from a drop-down list using jQuery?
- How to get all selected checkboxes in an array using jQuery ?
- How to get file input by selected file name without path using jQuery ?
- How to reset selected value to default using jQuery ?
- jQuery | Hide/Show, Toggle and Fading methods with Examples
- jQuery | Effect show() Method
- jQuery UI | show() Method
- Include Bootstrap in AngularJS using ng-bootstrap
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.