To pass table row data to a Bootstrap modal, you can make use of HTML, JavaScript, and Bootstrap’s data attributes. Here’s an example of how you can achieve this:
“`html
Table
| ID | Name | Action | |
|---|---|---|---|
| 1 | John Doe | johndoe@example.com | |
| 2 | Jane Smith | janesmith@example.com |
“`
In the above code:
– On each table row, we have added `data-toggle`, `data-target`, `data-id`, `data-name`, and `data-email` attributes which are Bootstrap data attributes used for toggling the modal, specifying the target modal div, and passing the row data.
– The modal itself is added at the end of the HTML, following the table.
– The JavaScript code listens for the modal’s `”show.bs.modal”` event, which is triggered when the modal is about to be shown. Inside this event handler, we extract the data attributes of the button that triggered the modal and update the corresponding elements within the modal with the retrieved values.
When you run this code, clicking the “View” button on any table row will open the modal with that row’s data filled in.
Note: The above example uses Bootstrap version 4.5.2 and jQuery version 3.5.1. Make sure you have included these dependencies in your project.