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
On Friday, November 23, 2012 8:58:17 PM UTC+1, Joe Barnhart wrote: > > 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 > > --
