Dynamic HTML Tables on the Client Side (OT)

derby has asked for the wisdom of the Perl Monks concerning the following question:

We have a web app that allows users to build tables that will be included on reports. The app allows end-users to enter the number of rows and columns. The app posts back to the server and a table of X by Y textboxes are available for end-user filling. The problem is that once you decide on the dimensions, there's no ability to add new rows or cols or delete rows or cols. No big deal I thought, wrap HTML::Table with some customized linkage that allows adds and deletes .

Not good enough. The major client wants to be able to "size" the table - actually control the width and height of cells. To my knowledge this cannot be done easily with HTML. Sure, I could offer some additional links that allow a user to control the width and height but that's going to be a UI nightmare (especially when you add the UI for adding/deleting rows and columns).

I've come to the conclusion that this needs to be a purely client side thing. Either javascript, a java applet or --ack-- a flash app.

Has anyone ever tried this? Does anyone know of any examples? I've looked at JXHTMLEDIT and it's close but a bit too heavy weight.

-derby

And don't think I'm not pushing back on that resize requirement. I'm just exploring for more info until the push is felt.

Comment on Dynamic HTML Tables on the Client Side (OT)

Replies are listed 'Best First'.
Re: Dynamic HTML Tables on the Client Side (OT) by dragonchild (Archbishop) on Sep 04, 2003 at 20:02 UTC
First off, this is quite stupid. Re-sizing stuff in HTML is a "Bad Plan"(tm). For one thing, HTML renderers are not required to display things uniformly. This isn't a windowing system. In fact, if you think of HTML as a hint, not a demand, you'll be a lot closer to reality. (Some are demands, but most are hints.) That said, this is actually quite easy, once you get the UI designed. `[ ] [ ] [ ] ... [ ] chk [ ] chk [ ] chk . . . . . . chk chk chk ... [Add Row] [Update] [Submit]` [download] The `[ ]` are textboxes to control size. The chk boxes are to indicate deletion of the column/row. Add Row (and possibly Add Col) are self-explanatory. The big confusion point is the Update vs. Submit buttons. Update refreshes the screen with any new chnges. Submit actually sends the table in. Make sure that you hammer into your client's head that HTML will NOT provide the same kind of interface that Windows (or X or whatever) provides for them. This is especially true in terms of exact layout. Try this sometime - create a textbox that's 80 characters wide, then view it in IE 5, IE 5.5, NS 4.72, NS 6, and NS 7. See how many characters actually fit in the view you're given. If you're masochistic, do the above test in 800x600, 1024x768, and 1280x1024 resolution. Maybe vary your color depth and your graphics card as well. Maybe, you could even vary your system font to add another dimension. You'll see what I'm talking about. The actual implementation is, as always, left as an exercise for the reader. ------ We are the carpenters and bricklayers of the Information Age. The idea is a little like C++ templates, except not quite so brain-meltingly complicated. -- TheDamian, Exegesis 6 Please remember that I'm crufty and crochety. All opinions are purely mine and all code is untested, unless otherwise specified.	[reply] [d/l] [select]
Re: Dynamic HTML Tables on the Client Side (OT) by BUU (Prior) on Sep 04, 2003 at 20:54 UTC
Doing what you require is fairly even given a decent implementation of the latest javascript DOM, both IE5.5+ and Moz6 should support what you are looking to do. All you really need to do is treat the table it self as an object and then call the various table manipulation methods on it via the DOM. Here are a quick summary of several methods I copied from the MSDN site: createTFoot Creates an empty tFoot element in the table. createTHead Creates an empty tHead element in the table. deleteCaption Deletes the caption element and its contents from the table. deleteCell Removes the specified cell (td) from the table row, as well as from the cells collection. deleteData Removes a specified range of characters from the object. deleteRow Removes the specified row (tr) from the element and from the rows collection. deleteTFoot Deletes the tFoot element and its contents from the table. deleteTHead Deletes the tHead element and its contents from the table.	[reply]
Re: Dynamic HTML Tables on the Client Side (OT) by jeffa (Bishop) on Sep 05, 2003 at 13:43 UTC
I never cared much for HTML::Table and i use DBIx::XHTML_Table instead (but then again, i wrote it). However, anytime i have to design/code something complex like this, i use a template system. I would explain just how difficult this is going to be to the client, that they may have to pay a lot for this feature. Depending upon what they need and what they just want, they may decide to drop such a silly requirement - HTML is suppose to be flexible. Are they wanting this size requirement for printing purposes? Maybe you should deliver PDF's instead. Just some thoughts. jeffa L-LL-L--L-LL-L--L-LL-L-- -R--R-RR-R--R-RR-R--R-RR B--B--B--B--B--B--B--B-- H---H---H---H---H---H--- (the triplet paradiddle with high-hat)	[reply]