创build一个HTML表格，其中每个TR是一个FORM
我试图创build一个表，其中每一行是一种forms。 我希望每个input都在不同的表格分区中，但是我仍然需要这样，例如，所有的第一个input属于同一个表头等等。
我想要做的是一个可编辑的网格 ，或多或less的这个：
<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> 但显然，我不能以这种方式安排标签（或者w3cvalidation者所说的）。
任何好办法做到这一点？
如果你想要一个“可编辑的网格”，也就是像结构这样的表格，允许你将任何一行作为一个表单，使用模仿TABLE标签布局的CSS： display:table ， display:table-row ， display:table-cell 。
无需将整个表格封装在一个表格中，也不需要为表格的每一个明显的行创build单独的表格和表格。
试试这个：
<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封装在FORM中的问题是任何和所有表单元素都会在提交时发送（也许这是所期望的，但可能不是）。 此方法允许您为每个“行”定义一个表单，并只发送提交的那一行数据。
围绕TR标签（或TR围绕FORM）包装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的浏览器都应该显示您的css数据表，就像使用TABLE，TR和TD标签一样。 他们中的大多数是。
请注意，您也可以通过将行组分别包装到另一个DIV中，使用display: table-header-group ， table-row-group和table-footer-group来模仿THEAD，TBODY，TFOOT。
注意：你不能用这个方法做的唯一的事是colspan。
看看这个插图： http : //jsfiddle.net/ZRQPP/
如果所有这些行都是相关的，并且您需要更改表格数据…为什么不把表格中的整个表格包装起来，然后将GET更改为POST （除非您知道您不会发送超过GET请求可以发送的最大数据量）。
（当然，这是假设所有的数据都在同一个地方。）
<form method="POST" action="your_action"> <table> <tr> <td><input type="text" name="r1c1" value="" /></td> <!-- ... snip ... --> </tr> <!-- ... repeat as needed ... --> </table> </form>
列宽可能有问题，但可以明确设置。
<table> <tr> <td> <form> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </form> </td> </tr> <tr> <td> <form> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </form> </td> </tr> </table>
你也可以考虑把它作为一个单一的forms，然后使用jQuery从你想要的行中select表单元素，对它们进行序列化，然后将它们作为表单提交。
请参阅： http : //api.jquery.com/serialize/
此外，还有一些非常漂亮的网格插件： http : //www.google.com/search? q = jquery+grid&ie = utf-8&oe = utf-8&aq = t&rls = org.mozilla:en-US:official&client =火狐-A
如果使用JavaScript是一个选项，并且您希望避免嵌套表，请包括jQuery并尝试以下方法。
首先，你必须给每行一个唯一的ID如下所示：
<table> <tr id="idrow1"><td> ADD AS MANY COLUMNS AS YOU LIKE </td><td><button onclick="submitRowAsForm('idrow1')">SUBMIT ROW1</button></td></tr> <tr id="idrow2"><td> PUT INPUT FIELDS IN THE COLUMNS </td><td><button onclick="submitRowAsForm('idrow2')">SUBMIT ROW2</button></td></tr> <tr id="idrow3"><td>ADD MORE THAN ONE INPUT PER COLUMN</td><td><button onclick="submitRowAsForm('idrow3')">SUBMIT ROW3</button></td></tr> </table>
然后，在您的JavaScript页面中包含以下function。
<script> function submitRowAsForm(idRow) { form = document.createElement("form"); // CREATE A NEW FORM TO DUMP ELEMENTS INTO FOR SUBMISSION form.method = "post"; // CHOOSE FORM SUBMISSION METHOD, "GET" OR "POST" form.action = ""; // TELL THE FORM WHAT PAGE TO SUBMIT TO $("#"+idRow+" td").children().each(function() { // GRAB ALL CHILD ELEMENTS OF <TD>'S IN THE ROW IDENTIFIED BY idRow, CLONE THEM, AND DUMP THEM IN OUR FORM if(this.type.substring(0,6) == "select") { // JQUERY DOESN'T CLONE <SELECT> ELEMENTS PROPERLY, SO HANDLE THAT input = document.createElement("input"); // CREATE AN ELEMENT TO COPY VALUES TO input.type = "hidden"; input.name = this.name; // GIVE ELEMENT SAME NAME AS THE <SELECT> input.value = this.value; // ASSIGN THE VALUE FROM THE <SELECT> form.appendChild(input); } else { // IF IT'S NOT A SELECT ELEMENT, JUST CLONE IT. $(this).clone().appendTo(form); } }); form.submit(); // NOW SUBMIT THE FORM THAT WE'VE JUST CREATED AND POPULATED } </script>
那么我们在这里做了什么？ 我们已经给每行一个唯一的ID，并在行中包含一个元素，可以触发提交该行的唯一标识符。 当提交元素被激活时，dynamic创build并build立一个新的表单。 然后使用jQuery，我们克隆包含在我们传递的行的<td>的所有元素，并将克隆附加到我们dynamic创build的表单中。 最后，我们提交表格。
如果所有这些行都是相关的，并且您需要更改表格数据…为什么不把表格中的整个表格包装好，然后将GET更改为POST（除非您知道您不会发送超过GET请求可以发送的最大数据量）。
我无法将整个表格封装成一个表格，因为每一行的一些input字段是input type =“file”，文件可能很大。 当用户提交表单时，我想仅POST当前行的字段，而不是所有行中可能有不需要的大文件的所有字段，导致表单提交非常慢。
所以，我试图错误的嵌套：tr / form和form / tr。 但是，只有在不尝试将新的inputdynamic添加到表单的情况下才有效。 dynamic添加的input不属于不正确的嵌套forms，因此不会被提交。 （有效的表格/表格dynamicinput提交就好了）。
嵌套div [display：table] / form / div [display：table-row] / div [display：table-cell]会产生不一致的网格宽度。 当我将div [display：table-row]replace为[display：table-row]时，我设法得到了统一的布局：
div.grid { display: table; } div.grid > form { display: table-row; div.grid > form > div { display: table-cell; } div.grid > form > div.head { text-align: center; font-weight: 800; }
要在IE8中正确显示布局，请执行以下操作：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... <meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10" />
输出样本：
<div class="grid" id="htmlrow_grid_item"> <form> <div class="head">Title</div> <div class="head">Price</div> <div class="head">Description</div> <div class="head">Images</div> <div class="head">Stock left</div> <div class="head">Action</div> </form> <form action="/index.php" enctype="multipart/form-data" method="post"> <div title="Title"><input required="required" class="input_varchar" name="add_title" type="text" value="" /></div>
然而，让这个代码在IE6 / 7中工作会更困难。
如果你可以使用JavaScript并严格要求你的网页，你可以把文本框，checkbox，以及在你的表的每一行，并在每行的地方button（或类rowSubmit链接）“保存”的末尾。 没有任何FORM标签。 比JS和Ajax模拟的forms是这样的：
<script type="text/javascript"> $(document).ready(function(){ $(".rowSubmit").click(function() { var form = '<form><table><tr>' + $(this).closest('tr').html() + '</tr></table></form>'; var serialized = $(form).serialize(); $.get('url2action', serialized, function(data){ // ... can be empty }); }); }); </script>
你怎么看？
PS：如果你用jQuery写这个：
$("valid HTML string") $(variableWithValidHtmlString)
它会变成jQuery对象，你可以像在jQuery中一样使用它。
表格不是为了这个，为什么不使用<div>和CSS？
我第二个哈门的divbuild议。 或者，您可以将表格封装在表单中，然后在提交之前使用javascript捕获行焦点并通过javascript调整表单动作。
我有一个类似于原来问题中提出的问题。 我很喜欢被称为表格元素的div（不知道你能做到这一点！），并给它一个运行。 不过，我的解决scheme是保持我的表包装在标签，但重命名每个input和select选项成为数组的关键，我现在parsing，以获取选定行中的每个元素。
这是表中的一行。 请注意，key [4]是从中检索此表行的数据库中行的呈现标识：
<table> <tr> <td>DisabilityCategory</td> <td><input type="text" name="FormElem[4][ElemLabel]" value="Disabilities"></td> <td><select name="FormElem[4][Category]"> <option value="1">General</option> <option value="3">Disability</option> <option value="4">Injury</option> <option value="2"selected>School</option> <option value="5">Veteran</option> <option value="10">Medical</option> <option value="9">Supports</option> <option value="7">Residential</option> <option value="8">Guardian</option> <option value="6">Criminal</option> <option value="11">Contacts</option> </select></td> <td>4</td> <td style="text-align:center;"><input type="text" name="FormElem[4][ElemSeq]" value="0" style="width:2.5em; text-align:center;"></td> <td>'ccpPartic'</td> <td><input type="text" name="FormElem[4][ElemType]" value="checkbox"></td> <td><input type="checkbox" name="FormElem[4][ElemRequired]"></td> <td><input type="text" name="FormElem[4][ElemLabelPrefix]" value=""></td> <td><input type="text" name="FormElem[4][ElemLabelPostfix]" value=""></td> <td><input type="text" name="FormElem[4][ElemLabelPosition]" value="before"></td> <td><input type="submit" name="submit[4]" value="Commit Changes"></td> </tr> </table>
然后，在PHP中，我使用下面的方法在数组（$ SelectedElem）中存储与提交button对应的行中的每个元素。 我正在使用print_r()来说明：
$SelectedElem = implode(",", array_keys($_POST['submit'])); print_r ($_POST['FormElem'][$SelectedElem]);
也许这听起来很复杂，但结果却很简单，它保留了桌子的组织结构。
就像Harmen所说的那样，就像不使用表格一样简单。 毕竟，你并没有显示数据，你正在收集数据。
我将拿这个问题23例如： http : //accessible.netscouts-ggmbh.eu/en/developer.html#fb1_22_5
在纸上，它是好的。 如果你不得不显示结果，那可能是好的。
但是，你可以用…标签和一个select4个段落（选项将是第一行的标题）。 每行一段，这就简单多了。
