editTableRow: Edit the Data in a Table Row
Switching from a table of information to a separate page with a form in order to change some details, is very distracting and cumbersome. This script example allows individual table rows to be switched into editable versions.
In the table below, the cells can be turned into mini-forms for each row using the icon in the first column.
| Name | Company | ||
|---|---|---|---|
|
Lorem Ipsum | Molesti | lorem@ipsum.com |
|
Lorem Ipsum | Molesti | lorem@ipsum.com |
|
Lorem Ipsum | Molesti | lorem@ipsum.com |
|
Lorem Ipsum | Molesti | lorem@ipsum.com |
|
Lorem Ipsum | Molesti | lorem@ipsum.com |
|
Lorem Ipsum | Molesti | lorem@ipsum.com |
The changes can be posted to the server using AJAX when a row is switched back, or using a submit button elsewhere on the page.
Required Files
-
jQuery Addon Script: jquery.classbehaviours.edittablerow.js
- Prerequisite Script: jquery.classbehaviours.js
- Additional Script: jquery.classbehaviours.echoinput.js
- Example Markup: echoInput.html
Comments on this Article