Question

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

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

表格行和输入如下：

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

围绕TR标记（或围绕FORM的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应该显示你的css数据表，就像你使用TABLE，TR和TD标签一样。他们中的大多数都这样做。

请注意，您还可以通过将行组分别包含在display: table-header-group，table-row-group和table-footer-group的另一个DIV中来模仿THEAD，TBODY，TFOOT。

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

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

在表格内形成

3 个答案: