在表格内形成

Ale*_*lex 222 html forms firebug html-table

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

因此,提交表单不包括字段.

表行和输入如下:

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

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>
Run Code Online (Sandbox Code Playgroud)

任何帮助都会很棒,谢谢.

Que*_*tin 346

形式是不允许是的子元素table,tbodytr.尝试将其中的一个放在那里将导致浏览器将表单移动到它后面的表格(同时保留其内容 - 表行,表格单元格,输入等 - 后面).

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

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

  • 注意使用整个表格的一个表格,所有字段都将发送到服务器,即使它们是空的.它可能是一个庞大的数据!请用于大众/公共用途,更喜欢使用从该行中的按钮打开的对话框(不在表格中). (2认同)
  • @Loenix:您不太可能在表格中放入足够多的数据,使其成为人们带宽的重大负担(至少与典型网页的大小相比)。要求用户在选择编辑行和能够进行更改之间加载另一个页面,OTOH,将是他们必须执行的令人讨厌的额外交互。 (2认同)
  • @Qentin足够公平.遗憾的是,经过二十年没有明显原因,这仍然存在. (2认同)

Vla*_*mir 176

如果要保存标记,请使用"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>
Run Code Online (Sandbox Code Playgroud)

  • 请注意,此解决方案仅适用于HTML5. (62认同)
  • 此外,它将无法在Internet Explorer中工作[更多信息在这里](http://caniuse.com/#feat=form-attribute) (17认同)

Mat*_*hew 35

如果你想要一个"编辑网格",即像结构的表格,可以让你做任何行的形式,使用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>
Run Code Online (Sandbox Code Playgroud)

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

将FORM标记包裹在TR标记(或围绕FORM的TR)周围的问题是它是无效的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">
Run Code Online (Sandbox Code Playgroud)

任何其他支持display的浏览器:table,display:table-row和display:table-cell应该显示你的css数据表,就像你使用TABLE,TR和TD标签一样.大多数人都这样做.

请注意,你也可以模仿THEAD,TBODY,通过包装与另一个DIV你行组TFOOT display: table-header-group,table-row-grouptable-footer-group分别.

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

看看这个例子:http://jsfiddle.net/ZRQPP/

  • 提及这个+1不会使colspan ...我必须错过第一次阅读它;-) (4认同)
  • 那应该是绿色选中的答案(即使不使用真正的表格标签) (2认同)