tags:

views:

524

answers:

6

I'd like to be able to do something like this in HTML. It isn't valid HTML, but the intent is there:

<table>
    <tr>
        <th>Name</th>
        <th>Favorite Color</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <form action="/updatePerson" method="post">
            <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
            <td><input name="name" value="John"/></td>
            <td><input name="favorite_color" value="Green"/></td>
            <td><input type="submit" value="Edit Person"/></td>
        </form>
        <td>
            <form action="deletePerson" method="post">
                <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
                <input type="submit" value="Delete Person"/>
            </form>
        </td>
    </tr>
    <tr>
        <form action="/updatePerson" method="post">
            <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
            <td><input name="name" value="Sally"/></td>
            <td><input name="favorite_color" value="Blue"/></td>
            <td><input type="submit" value="Edit Person"/></td>
        </form>
        <td>
            <form action="deletePerson" method="post">
                <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
                <input type="submit" value="Delete Person"/>
            </form>
        </td>
    </tr>
</table>

Obviously, I can't do this because I must not have a form tag immediately inside of of a <tr> element. The only alternatives I can see are to use nasty javascript or to change the behavior of my program.

What might be a solution that would allow me to have a form that spans multiple columns like this?

+1  A: 

One solution would be if your multiple columns were actually created in DIVs instead of tables.

David Hedlund
A: 

Nope, there isn't such form. But, in many browsers, your usage is working like you expected, except for when you dynamicly creat DOM elements with such structure in FireFox.

Maybe you can throw the tag, use javascript to do the submit; Or you can use to do the table layout thing.

deerchao
A: 

One option is to combine the columns with colspans like this:

<table>
    <tr>
        <th>
            Name
        </th>
        <th>
            Favorite Color
        </th>
        <th>
            &nbsp;
        </th>
        <th>
            &nbsp;
        </th>
    </tr>
    <tr>
        <td colspan="4">
            <form action="/updatePerson" method="post">
                <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
     <input name="name" value="John"/>
     <input name="favorite_color" value="Green"/>
     <input type="submit" value="Edit Person"/>
            </form>
            <form action="deletePerson" method="post">
                <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
     <input type="submit" value="Delete Person"/>
            </form>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <form action="/updatePerson" method="post">
                <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
                <input name="name" value="Sally"/>
     <input name="favorite_color" value="Blue"/>
     <input type="submit" value="Edit Person"/>
            </form>
            <form action="deletePerson" method="post">
                <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
     <input type="submit" value="Delete Person"/>
            </form>
        </td>
    </tr>
</table>

And style the form element's layout with CSS. Or you can go with a pure DIV based layout.

Chris Tek
A: 

Use table-less design with Div's and CSS.

Eg.

<html>
<head>
<style type="text/css">
    #wrapper
    {
        width: 600px;
    }
    #header
    {
        width: 600px;
        height:30px;
    }
    #person
    {
       clear:both;
        width:600px;        }
    .name
    {
    clear:both;
        width: 200px;
        float: left;
        text-align: center;
    }
    .color
    {
        width: 200px;
        float: left;
        text-align: center;
    }
    .submit
    {
        width: 200px;
        float: left;
        text-align: center;
    }
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div class="name">
            <b>Name</b></div>
        <div class="color">
            <b>Favorite Color</b></div>
    </div>
    <div id="Person">
        <form action="/updatePerson" method="post">
        <div class="name">
            <input name="name" value="John" /></div>
        <div class="color">
            <input name="favorite_color" value="Green" /></div>
        <div class="submit">
            <input type="submit" value="Edit Person" /></div>
        </form>
    </div>
</div>
</body>
</html>
Bruce Adams
+2  A: 

I'd vote for the nasty Javascript. It would allow to keep the layout as it is.

Pekka
A: 

You could

a) combine entire table row in one form and handle it with one server-side script.

or

b) set form.action with javascript.

yu_sha