表格中的表单

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

因此，提交的表单不能包含这些字段。

表行和输入如下:

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

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

任何帮助都是最好的，谢谢。

当前回答

表单不允许是表的子元素，tbody或tr。试图将表单放在那里会导致浏览器将表单移动到表的后面(而将其内容-表行，表单元格，输入等-留在后面)。

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

在整个桌子上使用一个表格。然后使用所单击的提交按钮来确定要处理哪一行(为了快速)或处理每一行(允许批量更新)。

HTML 5引入了表单属性。这允许您在表外的每一行提供一个表单，然后使用给定行的id将给定行的所有表单控件与其中一个表单关联起来。

2011-05-11 16:31:36

其他回答

如果你想要一个“可编辑的网格”，即一个像表格一样的结构，允许你把任何一行变成表单，使用CSS来模仿table标签的布局: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>

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

将FORM标记包裹在TR标记周围(或TR包裹在FORM周围)的问题是，它是无效的HTML。表单仍然允许像往常一样提交，但在这一点上，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、TFOOT，方法是将行组分别包装在另一个DIV中，并分别显示:table-header-group、table-row-group和table-footer-group。

注意:这个方法唯一不能做的是colspan。

看看这个插图:http://jsfiddle.net/ZRQPP/

2016-01-26 16:02:06

使用"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 >标签外的表单字段)

2014-02-07 07:55:17