创建一个HTML表格，其中每个TR是一个FORM [英] Create a HTML table where each TR is a FORM
问题描述
我试图创建一个表格，每一行都是一个表格。我希望每个输入都在不同的表格分区中，但是我仍然需要，例如，所有第一个输入都属于同一个表格头等。
我试图做的是一个可编辑的网格，或多或少的这个：
< table>
< tr>
< form method =GETaction =whatever>
< td>< input type =text/>< / td>
< td>< input type =text/>< / td>
< / form>
< / tr>
< tr>
< form method =GETaction =whatever>
< td>< input type =text/>< / td>
< td>< input type =text/>< / td>
< / form>
< / tr>
< / table>
但显然我不能以这种方式安排标签（或者w3c验证程序所说的）。
任何好的方法都可以做到这一点？ 一个可编辑的网格，即一个类似结构的表格，它允许您将任何行作为表单，使用模仿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 =trmethod =postaction =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的问题是任何和所有的表单元素都将被发送提交（也许这是想要的，但可能不会）。此方法允许您为每个行定义一个表单，并只发送提交的那一行数据。
围绕TR标签包装FORM标签的问题（或者是一个FORM附近的TR）是它是无效的HTML。该表格仍然允许像往常一样提交，但此时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标签一样。他们大多做
请注意，你也可以模仿THEAD，TBODY，TFOOT用包裹你的行组在另一个DIV显示：表 - header-group ， table-row-group 和 table-footer-group 。
注意：此方法无法做的唯一事情是colspan。
看看这个插图： http://jsfiddle.net/ZRQPP/
I'm trying to create a table where each row is a form. I want that each input is in a different table division, but I still need that for example, all first inputs belong to the same table head and so on.
What I'm trying to do is an editable grid, more or less this:
<table>
<tr>
<form method="GET" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
<tr>
<form method="GET" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
</table>
But apparently I cannot arrange the tags in that way (or so is what the w3c validator said).
Any good way to do this?
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.
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.
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.
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)
<!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.
Note that you can also mimic THEAD, TBODY, TFOOT by wrapping your row groups in another DIV with display: table-header-group, table-row-group and table-footer-group respectively.
NOTE: The only thing you cannot do with this method is colspan.
Check out this illustration: http://jsfiddle.net/ZRQPP/
这篇关于创建一个HTML表格，其中每个TR是一个FORM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
