Form inside a table form 不能作为 table 的子元素

Question

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

因此，提交表单不包括字段。

表格行和输入如下：

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

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

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

使用display：table-row表单，并将表格标签完全拖放。看到我的回答：stackoverflow.com/a/15600151/1038812 — Matthew, Mar 24 '13 at 15:27

昆汀 · Accepted Answer · 2016-07-25 14：19：39Z

最多投票248下投票接受

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

您可以在表单中放置整个表格。您可以在表格单元格内放置一个表单。您不能在表单中拥有表格的一部分。

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

编辑于七月25 '16在14:19

16点31分回复：

昆汀

542k58720893

1

使用整个表格中的一个表单来保养，所有字段都将发送到服务器，即使它们是空的。这可能是一个巨大的数据！请大众/公众使用，更喜欢使用从该行中的按钮打开的对话框（表单不在表中）。 - Loenix Feb 13 '16 at 10:41

@Loenix：您不太可能在表格中放置足够的数据，因为它是人们带宽的重要负担（至少与典型网页的大小相比）。要求用户在选择编辑行和进行更改之间加载其他页面，OTOH将是一个令人讨厌的额外交互，他们必须执行。 - 昆汀 2月13日'16在10:55

我不是说打开另一个页面，而是使用对话框/模态。例如getbootstrap.com/javascript/#modals-examples这允许您使用更美观的形式，以优化的方式获取更多的输入。当您显示100行+ 10输入...它变得越来越多 - Loenix Feb 13 '16 at 15:55

它仍然是用户的额外交互（并且否定批量更新的可能性）。 - 昆汀 2月13日16时21分53分

1

您不需要在原始问题中提出的解决方案的编辑按钮。 - 昆汀 2月15日'16在7:50

显示1条评论

彼得·潘 - MSFT · Answer 2 · 2017-03-29 05：43：19Z

最多选票116向下投票

使用“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>

3月29日在5:43编辑

彼得·潘 - MSFT

82592620

2月7日'14在7:55 回答

弗拉基米尔

1370187

57

请注意，此解决方案仅适用于HTML5。 - threenplusone Feb 14 '14 at 4:18

12

此外，它不会在互联网浏览器更多的信息在这里 - Souhaieb Besbes Aug 27 '15 at 9:50

有没有什么计划让IE兼容，你知道@SouhaiebBesbes吗？我无法以任何其他方式使我的表单工作。 - Zoinks10 Apr 5 '16 at 0:53

1

表单属性的状态是“正在考虑”，这意味着您必须非常耐心的开发人员。microsoft.com / en-us / microsoft-edge / platform / status / ...同时你可以尝试这个polyfill，看看它是否适用于你stackoverflow.com/a/26696165/648484 - Souhaieb Besbes 4月5日'16在8:24

现在似乎在开发中，可以使用 - user1156544 6月19日13:47

添加评论

马修 · Answer 3 · 2016-01-26 16：02：06Z

如果你想要一个“编辑网格”，即像结构的表格，可以让你做任何行的形式，使用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中的问题是，任何和所有表单元素都将在提交时发送（也许这是所需但可能不是）。此方法允许您为每个“行”定义一个表单，并在提交时仅发送该行数据。

在TR标签（或围绕FORM）周围缠绕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">

支持显示的任何其他浏览器：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/

提到这个+1不能启用colspan ...我一定错过了一读通过;-) — 约翰内斯·鲁道夫, 3月19日20时29分

昆汀 · Accepted Answer · 2016-07-25 14：19：39Z

最多投票248下投票接受

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

您可以在表单中放置整个表格。您可以在表格单元格内放置一个表单。您不能在表单中拥有表格的一部分。

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

编辑于七月25 '16在14:19

16点31分回复：

昆汀

542k58720893

1

使用整个表格中的一个表单来保养，所有字段都将发送到服务器，即使它们是空的。这可能是一个巨大的数据！请大众/公众使用，更喜欢使用从该行中的按钮打开的对话框（表单不在表中）。 - Loenix Feb 13 '16 at 10:41

@Loenix：您不太可能在表格中放置足够的数据，因为它是人们带宽的重要负担（至少与典型网页的大小相比）。要求用户在选择编辑行和进行更改之间加载其他页面，OTOH将是一个令人讨厌的额外交互，他们必须执行。 - 昆汀 2月13日'16在10:55

我不是说打开另一个页面，而是使用对话框/模态。例如getbootstrap.com/javascript/#modals-examples这允许您使用更美观的形式，以优化的方式获取更多的输入。当您显示100行+ 10输入...它变得越来越多 - Loenix Feb 13 '16 at 15:55

它仍然是用户的额外交互（并且否定批量更新的可能性）。 - 昆汀 2月13日16时21分53分

1

您不需要在原始问题中提出的解决方案的编辑按钮。 - 昆汀 2月15日'16在7:50

显示1条评论

彼得·潘 - MSFT · Answer 5 · 2017-03-29 05：43：19Z

最多选票116向下投票

使用“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>

3月29日在5:43编辑

彼得·潘 - MSFT

82592620

2月7日'14在7:55 回答

弗拉基米尔

1370187

57

请注意，此解决方案仅适用于HTML5。 - threenplusone Feb 14 '14 at 4:18

12

此外，它不会在互联网浏览器更多的信息在这里 - Souhaieb Besbes Aug 27 '15 at 9:50

有没有什么计划让IE兼容，你知道@SouhaiebBesbes吗？我无法以任何其他方式使我的表单工作。 - Zoinks10 Apr 5 '16 at 0:53

1

表单属性的状态是“正在考虑”，这意味着您必须非常耐心的开发人员。microsoft.com / en-us / microsoft-edge / platform / status / ...同时你可以尝试这个polyfill，看看它是否适用于你stackoverflow.com/a/26696165/648484 - Souhaieb Besbes 4月5日'16在8:24

现在似乎在开发中，可以使用 - user1156544 6月19日13:47

添加评论

马修 · Answer 6 · 2016-01-26 16：02：06Z

如果你想要一个“编辑网格”，即像结构的表格，可以让你做任何行的形式，使用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中的问题是，任何和所有表单元素都将在提交时发送（也许这是所需但可能不是）。此方法允许您为每个“行”定义一个表单，并在提交时仅发送该行数据。

在TR标签（或围绕FORM）周围缠绕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">

支持显示的任何其他浏览器：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/

提到这个+1不能启用colspan ...我一定错过了一读通过;-) — 约翰内斯·鲁道夫, 3月19日20时29分

You are here

Form inside a table form 不能作为 table 的子元素

保护由hjpotter92 9月2日在'13 0:11

3答案

保护由hjpotter92 9月2日在'13 0:11

友情链接

搜索表单

用户登录

You are here

Form inside a table form 不能作为 table 的子元素

保护由hjpotter92 9月2日在'13 0:11

3答案

保护由hjpotter92 9月2日在'13 0:11

友情链接