tableFormSynch jQuery Plugin

tableFormSynch Demo

This plugin works in conjunction with the metadata plugin (http://plugins.jquery.com/project/metadata) to bind a table to a form such that you can populate the form with the data stored in a particular row and then use the form to update the data and write it back to the row. It also has functions for creating a new row based on the data in the form, deleting a selected row, and clearing the form of all values. It works with all form elements, including checkboxes, radio buttons, and <select>

If you're not sure where to start, try it out by doing the following steps:

1. Click on one of the Edit links. The form will be populated with data associated with that row.
2. Make changes to the data in the form and click the "Update" button. The data will be written back to to the row (hint: change at least the person's name or e-mail to visibly change the row).
3. You can confirm that the data for the row was updated by clicking on a different Edit link (populating the form with that data), then going back and clicking the original Edit link. All of the changes you made in that first step will be reflected in the form again.
4. The "Add" link and the "Delete" links work as well. To start all over again, just refresh the page.

All of the files for this demo, including the metadata plugin and three versions of the plugin file...

• A fully-documented version with a long explanation of how it works and what you need to do to make it work.
• An undocumented but human-readable version meant for making modifications.
• A minified version for production use.

...are available in the following zip file:

tableFormSynch.zip

This demo consists of HTML, CSS, and JavaScript files, and it doesn't make any AJAX/server calls, so you can run the demo on your local machine.