HTML：跨多个td列跨越表单

Question

我希望能够在HTML中做这样的事情。它不是有效的HTML，但目的是：

<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>

显然，我无法做到这一点，因为我不能在<tr>元素内部直接使用表单标记。我能看到的唯一选择是使用讨厌的javascript或改变程序的行为。

什么样的解决方案可以让我拥有一个跨越多列的表单？

Answer 1

一种选择是将列与colspans组合如下：

<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>

使用CSS设置表单元素的布局样式。或者你可以使用纯DIV布局。

Answer 2

我知道的旧帖子，但对于其他任何人来看这个......

似乎所有对现在的反应都如此坚定地回答你的问题，他们忘记考虑可能有一个更简单的方法。

你的问题可能背后隐藏着，你有理由不能这样做。但是，正确的“HTML”有效方法是将整个表放在单个表单中。为什么需要一个表单来编辑，另一个表单需要删除？

<form action="/updatePerson" method="post">
<table>
    <thead>
        <tr><th>Person Name</th><th>Fave Color</th><th>&nbsp;</th><th>&nbsp;</th></tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" size="30" value="John" name="name_1"></td>
            <td><input name="favorite_color_1" value="Green"/></td>
            <td><input type="submit" value="Update" name="submit_update_1"></td>
            <td><input type="submit" value="Delete" name="submit_delete_1"></td>
        </tr><tr>
            <td><input type="text" size="30" value="James" name="name_2"></td>
            <td><input name="favorite_color_2" value="Orange"/></td>
            <td><input type="submit" value="Update" name="submit_update_2"></td>
            <td><input type="submit" value="Delete" name="submit_delete_2"></td>
        </tr>
    </tbody>
</table>
</form>

您需要在ASP / PHP /服务器代码中使用一些逻辑来计算推送了哪个按钮名称，但无论如何都需要使用您提出的解决方案。

Answer 3

使用Div和CSS的无表格设计。

例如

<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>

Answer 4

我投票给讨厌的Javascript。它可以保持布局不变。

Answer 5

如果你的多个列实际上是在DIV s而不是表格中创建的，那么一个解决方案就是。

Answer 6

不，没有这种形式。 但是，在许多浏览器中，除了在FireFox中动态创建具有此类结构的DOM元素时，您的使用情况与您预期的一样。

也许你可以扔掉＆lt; form＆gt;标记，使用javascript进行提交; 或者您可以使用＆lt; div＆gt;做表布局的事情。

Answer 7

你可以

a）将整个表行合并为一个表单，并使用一个服务器端脚本处理它。

或

b）用javascript设置form.action。

Answer 8

如果您使用的是jQuery，可以这样做：

<script type="text/javascript">
$(function() {
    $('.rowForm').submit(function() {
        //console.log($(':input',$(this).closest('tr')));
        //Because u cant span a form across a table row, we need to take all the inputs, move it to hidden div and submit
        var rowFormContent = $('.rowFormContent',$(this));
        rowFormContent.html('');    //Clear out anything that may be in here            
        $(':input',$(this).closest('tr')).clone().appendTo(rowFormContent);

        return true;
    });
});
</script>

<tr>
 ...
 <td>
   <form action="/cool" method="post" class="rowForm" id="form_row_1">
   <div class="rowFormContent" style="display: none;"></div>
   <input type="submit" value="save">
   </form>
 </td>
</tr>

副作用是您将在表单中获得额外的提交输入类型，但它将被隐藏并且不会伤害任何内容。这里的一个微妙的注释是使用'：input'。这是所有输入类型的jQuery简写（select，textarea等）。注意select vals not being copied。你必须做一些技巧（隐藏字段）来提交克隆（）d select的当前所选val。

Answer 9

我尝试了很多方法来解决同样的问题;单个html表中的多个表单。 FF＆amp; Chrome会自动关闭，如果放在一个或之前，或者因为它没有语义正确的HTML。我很欣赏基于布局可以解决问题但是如果你需要坚持使用基于表格的布局，你需要使用多个表并包装＆amp;紧接在＆amp;之前和之后标签。在我的情况下，我然后做了一些小的内联CSS调整来删除一两个边框，然后表格相互对接，好像它们是行。

示例：http://jsfiddle.net/chopstik/ve9FP/

Answer 10

我遇到了同样的问题，使用Javascript / jQuery解决了它。 这里的问题是表单不能伸展到表中的多个列，但是如果表单具有id <form id="unique_per_page"...></form>，则每个独立表单元素（如input，select或甚至textarea）都可以分配给表单使用表单属性<input type="text" name="userName" form="specific_form_id">

分配这些东西的jquery / javascript需要有一个随机字符串生成器，我从以下Stackoverflow answer

抓取

总的来说，代码看起来像这样：

    $("table tr").each(function(i, el){
        if(!$(el).find("form[name='updatePerson']").attr("id"))
        { //if the form does not have id attribute yet, assign a 10-character random string
            var fname = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2);
            $(el).find("form[name='updatePerson']").attr("id",fname); //assign id to a chosen form
            $(el).find("input").attr("form",fname); //assign form attribute to all inputs on this line
            $(el).find("form[name='deletePerson'] > input").removeAttr("form"); //remove form attribute from inputs that are children of the other form
        }
    });

您需要使用表单

的正确名称属性更新您包含的HTML代码

<table>
    <tr>
        <th>Name</th>
        <th>Favorite Color</th>
        <th>&nbsp;</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <form action="/updatePerson" name="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" name="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" name="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" name="deletePerson" method="post">
                <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/>
                <input type="submit" value="Delete Person"/>
            </form>
        </td>
    </tr>
</table>

Answer 11

我一直这样做的方式是：

<tr>
    <td><form><input name=1></td>
    <td><input name=2></td>
    <td><input type=submit></form></td>
</tr>

在第一个和最后一个 td 中包含表单，因此它位于实际文本区域中。真正的旧浏览器可能会在 / td 关闭表单，但今天没有。

用你的例子：

<tr>
    <td>
        <form action="/updatePerson" method="post">
            <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/>
    </td>
    <td>    <input name="name" value="John"/></td>
    <td>    <input name="favorite_color" value="Green"/></td>
    <td>
            <input type="submit" value="Edit Person"/>
        </form>
    </td>
    <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>