> I could do what other frameworks I've worked
> with do and wrap the whole table in a form
> and name elements with a parseable delimiter...

> <input type="text" name="foo$row$1" ... />

This is the type of solution I've used in the past, and then put the "save"
button in the last column of each row, ideally with something like this:

<button type="submit" name="action" value="123">Save row</table>

Where the value "123" is the number of the row that should be saved. My
server-side script then takes that number and gets all form fields where the
name ends with "_123" (or similar). The major problem with this is that IE
messes up the value of <button> elements, so I've generally used this:

<input type="submit" name="action" value="Save row #123">

Then the server-side script takes the value of the "action" form field,
parses out the "Save row #" and uses the number that's left. It's not pretty
but it's the best I could come up with and it seems to have worked for a lot
of apps.

By the way, using that method you could also have <input type="submit"
name="action" value="Save all rows"> at the top/bottom of the table which
the server-side script would then know to loop all form fields and save them
all. More complicated code-wise, but useful for users.

Hope that helps

Chris



-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of "C. Bergström"
Sent: 22 June 2007 08:42
To: [email protected]
Subject: [WSG] Tackling tabular data + per row form input

Hopefully I'm missing something obvious here.. In .Net and Jave this is 
handled transparently within the framework and I haven't had to look at 
it in a while..  I'd really like a clean and valid html way to display 
tabular data, but also need per row ability to do form posts without 
using a js library preferred.


This snippet below works until the point when the table becomes more 
complex or the the text width varies widely between columns.  Source ref [0]

 <!-- Tableless tables start -->
            <div class="notSoWide">
                   <div class="table">
                    <div class="th">
                     <div class="td">Item</div>
                     <div class="td">Description</div>
                     <div class="td">Qty</div>
                     <div class="td">Price</div>
                     <div class="td"></div>
                     <div class="td-clear-both"></div>
                    </div>
<!-- start repeater -->
                    <form action="cart.asp" method="post" class="cmxform">
                    <div class="tr">
                     <div class="td"><%=rs("ProductID")%></div>
                     <div class="td"><%=rs("ProductName")%></div>
                     <div class="td"><%=rs("Quantity")%></div>
                     <div class="td"><%=FormatCurrency(curPrice)%></div>
                     <div class="td">
                        <input type="submit" value="Remove" 
name="Action" class="submit" />
                        <input type="hidden" name="CartID" 
value="<%=rs("CartID")%>" />
                        <input type="hidden" name="ProductID" 
value="<%=rs("ProductID")%>" />
                     </div>
                     <div class="td-clear-both"></div>
                    </div>
                    </form>
<!-- loop -->
            </div>
        </div>

Alternatively there's something like this.. which isn't valid html and 
completely out of the question..

          <table>
              <form ... >
                  <tr>
                    <td><input type="text"...  /></td>
                    <td><input type="submit" ... /></td>
                  </tr>
              </form>

or something like this which can be made valid, but I then you come 
across an almost similar problem as with the div solution in that now 
columns aren't guaranteed to to line up.. Unless you start forcing 
width.. etc..

             <table>
                <tr>
                   <td class="one-big-td" >
                      <form>
                         <table>
                            .....


I'm a bit out of my normal water on this and making a working mock-up 
prototype before actually write the app.. I could do what other 
frameworks I've worked with do and wrap the whole table in a form and 
name elements with a parseable delimiter...

             <input type="text" name="foo$row$1" ... />


I know this has been tackled before, but mostly looking for interesting 
feedback on how it was accomplished..

Cheers,

Christopher


[0] http://www.bernzilla.com/design/tables/table.html


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************




*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************

Reply via email to