Edit Table row data using Bootstrap Modal & jQuery

How to edit a table row using a Bootstrap Modal Form and jQuery
Top Right

The following article will show you how to develop an editing button to open a Bootstrap modal form with the data take from the chosen table row.

This posts is related with sandorBlog(Dynamic Table) to explain how to edit information present on a table using jQuery.

.how to create an edit button

There are many methods to allow the user to edit the information contains the table. In this article I'll explain how to create an editing button like , that can open a Bootstrap Modal Form pre-filled with data. The prefilling action is done using jQuery.

  • <button type="button" class="btn btn-sm btn-primary fas fa-pencil-alt noUnderlineCustom text-white" data-toggle="modal" data-target="#editModal"></button> This is a HTML code that compose the editing button.
  • data-toggle="modal" This attribute activates the Bootstraps Modal without using JS.
  • data-target="#editModal" This attribute launches a specific Modal looking for its attribute ID.

.editable table example

Please click on the editing button and try to change some data:

ID Name Surname E-mail Phone Level Cr. date Up. date
1LillyViviennegiuseppe.keeling@example.com221.674.164402019-05-07 19:56:042019-05-19 11:13:02
2MireilleFelipajeanie84@example.org796.603.8789 x9169502019-05-07 19:56:042019-05-18 19:22:51
3KylaMariobartoletti.karianne@example.com739.737.1713 x17602019-05-07 19:56:042019-05-18 20:01:57
4MollyLinnierasheed30@example.net(580) 822-433502019-05-07 19:56:042019-05-19 10:14:35
5LilyanHarrydario27@example.org+1-547-526-029732019-05-07 19:56:042019-05-19 19:39:07
6OnieReymundofritz55@example.org(904) 947-1815 x5221002019-05-07 19:56:042019-05-19 10:10:49
7JanessaAllenrodriguez.german@example.net991.667.4686 x764dasdas02019-05-07 19:56:042019-05-19 11:13:02
8AprilHazlegoyette.alfonzo@example.com(656) 875-9390 x5762702019-05-07 19:56:042019-05-22 19:59:12
9EmmaDimitrimleannon@example.org514-770-1868 x315602019-05-07 19:56:042019-05-19 11:13:02
10HelenSalliehickle.meredith@example.org501-655-0082 x863902019-05-07 19:56:042019-05-19 19:39:10

.Bootstrap Modal Form

The following example shows the code behind the modal form prefilled with data from the table. Each time the user click on the button for editing the data, the jQuery code prefills the fields of the form taken from the table. Then, after the user changes it, the form sends the information back.

If you need more information about how to create awesome Modal form, please refer to the Bootstrap Web Site.

.jQuery pre filled steps

The following code shows the jQuery code that can listen the button event and prefill the modal form.

  • var tr = ele.target.parentNode.parentNode; The variable 'tr' gets the access to the second parentNode of the element (ele) who triggered the event. We need to declare two parent node because the first exits from the button to the <td>, and then from the <td> to the <tr> element.
  • var id = tr.cells[0].textContent; With this method you can easily access to the cells (td) of the table calling them with the index cells[0].

.more Articles