表格中的表单

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

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

表行和输入如下:

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


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

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

480357 次浏览
小开
最佳答案

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

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

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

HTML 5引入了form < em > < / em >属性。这允许你为每一行餐桌外提供一个表单，然后使用它的id将给定行的所有表单控件与其中一个表单关联起来。

小开

如果你想保存你的标记，使用“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>

(*在<形式比;标签)

小开

如果你想要一个“可编辑的网格”，即一个类似表格的结构，允许你把任何一行都变成一个表单，使用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，方法是分别使用display: table-header-group， table-row-group和table-footer-group将行组包装在另一个DIV中。

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

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


提交答案