Html 表格_Html_Firebug_Html Table_Forms

Html 表格

html forms

Html 表格,html,firebug,html-table,forms,Html,Firebug,Html Table,Forms,我在HTML表中包含一些表单，用于添加新行和更新当前行。我遇到的问题是，当我在开发工具中检查表单时，我看到表单元素在打开后立即关闭（表单中不包括输入等）因此，提交表单时无法包含字段表行和输入如下所示： <tr> <form method="post" action=""> <td> <input type="text" name="job_num"> </td>

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

的子元素。尝试将表单放在那里会导致浏览器将表单移动到它出现在表之后的位置（同时将其内容（表行、表单元格、输入等）留在后面）

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

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

HTML5介绍了。这允许您在表外为每行提供一个表单，然后使用其

id将给定行中的所有表单控件与其中一个表单相关联

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

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


好啊

（

标记外部的*表单字段）

如果您想要一个“可编辑网格”，即一个允许您将任何行设置为表单的类似表格的结构，请使用模拟表格标记布局的CSS:

显示：表格

，

显示：表格行

，以及

显示：表格单元格

不需要将整个表包装在一个表单中，也不需要为表中的每一行创建单独的表单和表

请尝试以下方法：

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


分区表
{
显示：表格；
}
表格tr，部门tr
{
显示：表格行；
}
SPAN.td
{
显示：表格单元格；
}
...
（单元数据）
（单元数据）
...

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

将表单标记包装在TR标记（或TR包装在表单）周围的问题在于它是无效的HTML。表单仍然允许像往常一样提交，但此时DOM被破坏。注意：尝试使用JavaScript获取表单或TR的子元素，可能会导致意外结果

请注意，IE7不支持这些CSS表格样式，IE8需要一个doctype声明才能使其进入“标准”模式：（试试这个或类似的东西）

任何其他支持display:table、display:table row和display:table单元格的浏览器都应该像使用table、TR和TD标记一样显示css数据表。他们中的大多数都是这样

请注意，您还可以通过分别使用

显示：表头组

、

表行组

和

表脚组

将行组包装在另一个DIV中来模拟ad、TBODY和TFOOT

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

查看此图：

不能放在

内。您忘记关闭

。请将“显示：表格行”用于表单，并将表格标记全部删除。请看我的回答：它不能，但它有效…注意，此解决方案仅适用于HTML5。此外，它在internet explorer中不起作用。表单属性的状态为“正在考虑中”，这意味着您必须非常耐心，同时您可以尝试此polyfill，看看它是否适用于您，现在似乎“正在开发中”，好的use@user1156544Edge现在支持它，但IE不支持。如果您需要支持IE，那么使用此解决方案就不走运了。我的计划是为两个表单元素使用两个表（我不敢相信我必须这样做）。谢谢微软！注意对整个表使用一个表单，所有字段都将发送到服务器，即使它们是空的。这可能是一个巨大的数据量！！！对于大规模/公共使用，请选择使用从该行按钮打开的对话框（表格不在表格中）。@Loenix:您不太可能在表格中放入足够的数据，从而对人们的带宽造成重大负担（至少与典型网页的大小相比）。要求用户在选择编辑行和能够进行更改之间加载另一个页面，OTOH，这将是他们必须执行的恼人的额外交互。原始问题中提出的解决方案不需要编辑按钮。为什么标准中禁止的

内部有

。遗憾的是，20年后，这一点仍然存在，没有明显的原因。+1提及这一点并不能使colspan。。。我一定错过了第一次阅读；-）这应该是绿色勾选的答案（即使不使用真正的表标记）“注意：尝试使用JavaScript获取表单或TR的子元素，这可能会导致意外的结果。”尽管这是一篇非常古老的文章，但这正是我学习它的方式。谁付钱给“定义标准”的人？我不想和他们说一句话

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