表格内

问题描述 投票：0回答：3

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

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

表格行和输入如下：

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

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

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

html firebug html-table forms
3个回答
455
投票

表格不允许成为

table
、
tbody
或
tr
的子元素。试图把一个放在那里往往会导致浏览器将表单移动到它出现在表格之后（同时将其内容——表格行、表格单元格、输入等——留在后面）。

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

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

HTML 5 引入了

form
属性。这允许您在表格外的每行提供一个表单，然后使用其
id
.

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

使用“表单”属性，如果你想保存你的标记：

<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 > 标签外的表单字段）

59
投票

如果您想要一个“可编辑的网格”，即允许您将任何行制作为表单的类似表格的结构，请使用模仿 TABLE 标签布局的 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 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 的浏览器应该显示你的 css 数据表，就像你使用 TABLE、TR 和 TD 标签一样。他们中的大多数人都这样做。

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

display: table-header-group
、
table-row-group
和 
table-footer-group
将行组包装在另一个 DIV 中来模仿 THEAD、TBODY、TFOOT。

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.