Html 表格内的表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5967564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form inside a table
提问by Alex
I'm including some forms inside a HTML table to add new rows and update current rows. The problem that I'm getting is that when I inspect the forms in my dev tools, I see that the form elements are closed immediately after opening (inputs, etc are not included within the form).
我在 HTML 表中包含一些表单以添加新行和更新当前行。我遇到的问题是，当我检查开发工具中的表单时，我看到表单元素在打开后立即关闭（表单中不包含输入等）。
As such, submitting a form fails to include the fields.
因此，提交表单无法包含这些字段。
The table row and inputs are as follows:
表行和输入如下：
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>
Any help would be great, thank you.
任何帮助都会很棒，谢谢。
回答by Quentin
A form is not allowedto be a child element of a table, tbodyor tr. Attempting to put one there will tend to cause the browser to move the form to it appears afterthe table (while leaving its contents — table rows, table cells, inputs, etc — behind).
形式是不允许是的子元素table，tbody或tr。试图将一个放在那里会导致浏览器将表单移动到它出现在表格之后（同时将其内容——表格行、表格单元格、输入等——放在后面）。
You can have an entire table inside a form. You can have a form inside a table cell. You cannot have part of a table inside a form.
您可以在表单中包含整个表格。您可以在表格单元格中包含一个表单。表格中不能包含表格的一部分。
Use one form around the entire table. Then either use the clicked submit button to determine which row to process (to be quick) or process every row (allowing bulk updates).
在整个桌子周围使用一种表格。然后使用单击的提交按钮确定要处理的行（快速）或处理每一行（允许批量更新）。
回答by Vladimir
Use the "form" attribute, if you want to save your markup:
如果要保存标记，请使用“表单”属性：
<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 fields outside of the < form > tag)
(*<form> 标签外的表单域)
Also see first 2 comments
另请参阅前 2 条评论
回答by Matthew
If you want a "editable grid" i.e. a table like structure that allows you to make any of the rows a form, use CSS that mimics the TABLE tag's layout: display:table, display:table-row, and display:table-cell.
如果你想要一个“编辑网格”，即像结构的表格，可以让你做任何行的形式，使用CSS，模仿表标签的布局：display:table，display:table-row，和display:table-cell。
There is no need to wrap your whole table in a form and no need to create a separate form and table for each apparent row of your table.
无需将整个表格包装在一个表格中，也无需为表格的每一行创建单独的表格和表格。
Try this instead:
试试这个：
<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>
The problem with wrapping the whole TABLE in a FORM is that any and all form elements will be sent on submit (maybe that is desired but probably not). This method allows you to define a form for each "row" and send only that row of data on submit.
将整个 TABLE 包装在 FORM 中的问题在于，任何和所有表单元素都将在提交时发送（可能是需要的，但可能不是）。此方法允许您为每个“行”定义一个表单，并在提交时仅发送该行数据。
The problem with wrapping a FORM tag around a TR tag (or TR around a FORM) is that it's invalid HTML. The FORM will still allow submit as usual but at this point the DOM is broken. Note: Try getting the child elements of your FORM or TR with JavaScript, it can lead to unexpected results.
将 FORM 标签包裹在 TR 标签（或 TR 包裹 FORM）的问题在于它是无效的 HTML。FORM 仍将允许像往常一样提交，但此时 DOM 已损坏。注意：尝试使用 JavaScript 获取 FORM 或 TR 的子元素，这可能会导致意外结果。
Note that IE7 doesn't support these CSS table styles and IE8 will need a doctype declaration to get it into "standards" mode: (try this one or something equivalent)
请注意，IE7 不支持这些 CSS 表格样式，并且 IE8 将需要一个 doctype 声明才能使其进入“标准”模式：（试试这个或类似的东西）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Any other browser that supports display:table, display:table-row and display:table-cell should display your css data table the same as it would if you were using the TABLE, TR and TD tags. Most of them do.
任何其他支持 display:table、display:table-row 和 display:table-cell 的浏览器都应该像使用 TABLE、TR 和 TD 标签一样显示你的 css 数据表。他们中的大多数人都这样做。
Note that you can also mimic THEAD, TBODY, TFOOT by wrapping your row groups in another DIV with display: table-header-group, table-row-groupand table-footer-grouprespectively.
请注意，您还可以通过分别用display: table-header-group、table-row-group和将行组包装在另一个 DIV 中来模拟 THEAD、TBODY、TFOOT table-footer-group。
NOTE:The only thing you cannot do with this method is colspan.
注意：您不能使用此方法做的唯一事情是 colspan。
Check out this illustration: http://jsfiddle.net/ZRQPP/
看看这个插图：http: //jsfiddle.net/ZRQPP/
