表格内表格

238

我将一些表格包含在HTML表中，以添加新行和更新当前行。我得到的问题是，当我在开发工具中检查表单时，发现打开后立即关闭了表单元素（输入等未包含在表单中）。

因此，提交表单无法包含这些字段。

表格行和输入如下：

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

任何帮助都会很棒，谢谢。

— 亚历克斯
source

<form>不能放在里面<tr>。

— 德里克·朕会功夫

而且您忘了关闭<tr>。

— 德里克·朕会功夫

将display：table-row用于您的表单，并完全放弃table标记。在这里查看我的答案：stackoverflow.com/a/15600151/1038812

— 马修（Matthew）

它不能，但是可以工作……

— 桑德堡

Answers:

369

形式是不允许是的子元素table，tbody或tr。尝试将其放置在此处会导致浏览器将表格移动到表格后的外观（同时保留其内容（表格行，表格单元格，输入等）后面）。

您可以在表单中包含整个表格。您可以在表格单元格中有一个表单。您不能在表单中包含表的一部分。

在整个表格周围使用一种表格。然后，使用单击的提交按钮来确定要处理的行（快速）或处理每一行（允许批量更新）。

HTML 5引入了form 属性。这样一来，您可以在表格外的每一行提供一个表单，然后使用将该表单控件中的所有表单控件与其中之一关联id。

— 昆汀
source

请注意，对于整个表格，请使用一种形式，所有字段将被发送到服务器，即使它们为空。可能是海量数据！！！为了大众/公共使用，请优先使用从该行中的按钮打开的对话框（不在表格中的对话框）。

— Loenix

@Loenix：您不太可能在表中放入足够的数据，以免给人们的带宽带来很大负担（至少与典型网页的大小相比）。要求用户在选择编辑行与能够进行更改之间加载另一页OTOH，这将是他们不得不执行的令人讨厌的额外交互。

— 昆汀

对于原始问题中提出的解决方案，您不需要编辑按钮。

— 昆汀

为什么禁止<form>在<table>标准内？

— 1234ru

@Qentin足够公平。遗憾的是，在没有明显原因的情况下，这种情况仍然持续了二十年。

— 1234ru

187

如果要保存标记，请使用“ form”属性：

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

（* <form>标记之外的表单字段）

另请参阅前2条评论

— 弗拉基米尔
source

请注意，此解决方案仅对HTML5有效。

— threenplusone 2014年

此外，它不会在网络工作探险更多的信息在这里

— Souhaieb Besbes

表单属性的状态为“正在考虑中”，这意味着您必须非常耐心 developer.microsoft.com/en-us/microsoft-edge/platform/status / ...同时，您可以尝试使用此polyfill并查看它是否对您有用stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

现在似乎“处于开发中”，可以使用

— user1156544

@ user1156544 Edge现在受支持，但IE不支持。如果您完全需要支持IE，那么使用此解决方案就很不幸了。我的计划是对两个表单元素使用两个表（我不敢相信我必须这样做）。谢谢微软！

— 冥王星

如果你想要一个“编辑网格”，即像结构的表格，可以让你做任何行的形式，使用CSS，模仿表标签的布局：display:table，display:table-row，和display:table-cell。

无需将整个表格包装成表格，也无需为表格的每个明显行创建单独的表格和表格。

尝试以下方法：

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

将整个TABLE封装在FORM中的问题在于，所有表单元素都将在提交时发送（也许是所希望的，但可能不是）。该方法允许您为每个“行”定义一个表单，并在提交时仅发送该行数据。

将FORM标记包裹在TR标记周围（或将TR包裹在FORM周围）的问题在于它是无效的HTML。FORM仍然允许照常提交，但此时DOM已损坏。注意：尝试使用JavaScript获取FORM或TR的子元素，这可能会导致意外结果。

请注意，IE7不支持以下CSS表格样式，并且IE8需要一个doctype声明才能使其进入“标准”模式：（尝试使用此方法或等效方法）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

任何其他支持display：table，display：table-row和display：table-cell的浏览器，都应像使用TABLE，TR和TD标记时一样显示CSS数据表。他们大多数都这样做。

请注意，你也可以模仿THEAD，TBODY，通过包装与另一个DIV你行组TFOOT display: table-header-group，table-row-group和table-footer-group分别。

注意：使用此方法不能做的唯一事情就是colspan。

查看以下插图：http : //jsfiddle.net/ZRQPP/

— 马修
source

+1表示无法启用colspan ...，我一定错过了第一次阅读；-)

— Johannes Rudolph

那应该是绿色的选中答案（即使不真正使用表格标签也是如此）

— Alessio