Placing form into "table" with jQuery?

[Joe Barnhart]

I want to achieve the effect of an editable table.  The implementation I want is a web2py form that gets moved into place beneath any row in a table when you click on the table row.  In my imagination I see the user clicking on the row and the table contents beneath the row sliding down to reveal a form that has the edit row's contents already filled in.  If another row is clicked, the table slides back up and then the same form is "moved" beneath the new edit row and the process repeats.

I'm not that familiar with HTML, but I'm pretty sure a table is not the right vehicle for this.  I don't see a table letting me slide down rows to make room for a form which shares no table-like view but is rather a typical form with fields, labels and comments.  The closest thing I can find in jQuery effects is a UL, for which they have the sliding effect to reveal a DIV of my choice.

The next problem is to "move" the form to the location where I want it to display.  This is conceptually easy -- I just need to figure out how to use jQuery to modify the DOM tree to place the form where I want it.  But my inexperience with DOM hampers me a bit in this area.

Last, the interaction of the form, i.e. preloading and capturing "submit", is a little daunting.  I am tempted to look into the "Load" feature here, but I'm not sure it is the best way to achieve interaction with the underlying page.  I would be getting the row.id from the clicked-on link to read the contents from the database and populate the form.  The form would submit the changes for the selected row when the Submit button is pressed.

Is this a pattern that others have used?  Are there any examples available?

Thanks in advance for your input.

-- Joe Barnhart

[Niphlod]

datatables does that. Basically inserts dinamically a td colspanning the entire row with a div holding whatever content you need
http://datatables.net/release-datatables/examples/api/row_details.html

[Joe Barnhart]

Hi Niphlod --

Yep, that jQuery plug-in definitely seems to have the capability I mentioned.  It seems rather a heavyweight component, however, for my use.  my tables are fairly small and I do not need the extensive capabilities of Datatables other than this form drop-down idea.  I think I'll play around with the way they implement it and see if I can get it working with a conventional table and a web2py SQLForm.