HTML：是否有可能在XHTML有效的方式在每个表行中有一个FORM标记？
我可以最好的描述如下：
我想这（整个表在editmode和保存button在每一行）。
<table> <tr> <td>Id</td> <td>Name</td> <td>Description</td> <td> </td> </tr> <tr> <td><input type="hidden" name="id" value="1" /></td> <td><input type="text" name="name" value="Name" /></td> <td><input type="text" name="description" value="Description" /></td> <td><input type="submit" value="Save" /></td> </tr> <tr> <td><input type="hidden" name="id" value="2" /></td> <td><input type="text" name="name" value="Name2" /></td> <td><input type="text" name="description" value="Description2" /></td> <td><input type="submit" value="Save" /></td> </tr> <!-- and more rows here ... --> </table>
我应该在哪里放置<form>标签？
你不能。 你唯一的select是把它分成多个表格，并把表格标签放在它之外。 您最终可能会嵌套您的表格，但不build议这样做：
<table> <tr><td><form> <table><tr><td>id</td><td>name</td>...</tr></table> </form></td></tr> </table>
我会完全删除表格，并将其replace为样式的HTML元素，如div和跨度。
值得一提的是，在HTML5中这是可能的，对input元素使用“form”属性：
<table> <tr> <td>Id</td> <td>Name</td> <td>Description</td> <td> </td> </tr> <tr> <td><form id="form1"><input type="hidden" name="id" value="1" /></form></td> <td><input form="form1" type="text" name="name" value="Name" /></td> <td><input form="form1" type="text" name="description" value="Description" /></td> <td><input form="form1" type="submit" value="Save" /></td> </tr> <tr> <td><form id="form2"><input type="hidden" name="id" value="1" /></form></td> <td><input form="form2" type="text" name="name" value="Name" /></td> <td><input form="form2" type="text" name="description" value="Description" /></td> <td><input form="form2" type="submit" value="Save" /></td> </tr> </table>
虽然在缺乏JS和使用原始元素干净，不幸的是，这不是在IE10中工作。
我有一个类似的问题，并回答这个问题HTML的 答案 ：表的forms？ 为我解决了它。 （不知道它是否是XHTML，但它在HTML5浏览器中工作）。
你可以使用CSS来给其他元素的表格布局。 虽然它只在铬上进行testing。
.table { display: table; } .table>* { display: table-row; } .table>*>* { display: table-cell; }
然后你使用下面的有效html。
<div class="table"> <form> <div>snake<input type="hidden" name="cartitem" value="55"></div> <div><input name="count" value=4/></div> </form> </div>
你只需要把<form ... >标签放在<table>标签和</form>的最后。
它有帮助。
我会说你可以，虽然它不validation，Firefox将重新安排代码（所以当你使用Web Developer时，在'View generated source'中看到的内容可能会让你感到惊讶）。 我不是专家，但是把
<form action="someexecpage.php" method="post">
就在前面
<tr>
然后使用
</tr></form>
在行的末尾肯定会给出function（在Firefox，Chrome和IE7-9中testing）。 为我工作，即使它产生的validation错误的数量是一个新的个人最好的/最坏的！ 没有看到任何问题的后果，我有一个相当重的风格的表。 我想你可能有一个dynamic生成的表，就像我这样做，这就是为什么parsing表行对我们凡人来说有点不明显。 所以基本上，在行的开始处打开表单，并在行结束之后closures它。
如果你试图添加一个像这样扭曲tr元素的表单
<table> <form> <tr> <td><input type="text"/></td> <td><input type="submit"/></td> </tr> </form> </table>
渲染过程中的一些浏览器会在声明之后立即closures窗体标记，将元素外部的input保留下来
像这样的东西
<table> <form></form> <tr> <td><input type="text"/></td> <td><input type="submit"/></td> </tr> </table>
此问题仍然适用于多个表格单元格的变形
正如上面所说的stereoscott，嵌套表是一个不被推荐的可能的解决scheme。 避免使用表格。
事实上，我有一个表中的每一行的表单的问题，与JavaScript（实际上是jQuery）：
像Lothre1说的那样，“在渲染过程中，一些浏览器会在声明之后立即closures窗体标记，而在元素之外留下input”
这使得我的input字段在表单之外，因此我无法通过使用JAVASCRIPT的DOM访问我的表单的子项。
通常，下面的JQUERY代码将不起作用：
$('#id_form :input').each(function(){/*action*/}); // this is supposed to select all inputS // within the form that has an id ='id_form'
但上面的例子不适用于呈现的HTML：
<table> <form id="id_form"></form> <tr id="tr_id"> <td><input type="text"/></td> <td><input type="submit"/></td> </tr> </table>
我仍然在寻找一个干净的解决scheme（尽pipe使用TR'id'参数来遍历DOM将解决这个特定的问题）
肮脏的解决scheme将（对于jQuery）：
$('#tr_id :input').each(function(){/*action*/}); // this will select all the inputS // fields within the TR with the id='tr_id'
上面的例子将工作，但它不是真的“干净”，因为它是指TR而不是FORM，并且它需要AJAX …
编辑：完整的过程与jquery / ajax将是：
//init data string // the dummy init value (1=1)is just here // to avoid dealing with trailing & // and should not be implemented // (though it works) var data_str = '1=1'; // for each input in the TR $('#tr_id :input').each(function(){ //retrieve field name and value from the DOM var field = $(this).attr('name'); var value = $(this).val(); //iterate the string to pass the datas // so in the end it will render s/g like // "1=1&field1_name=value1&field2_name=value2"... data_str += '&' + field + '=' + value; }); //Sendind fields datawith ajax // to be treated $.ajax({ type:"POST", url: "target_for_the_form_treatment", data:data_string, success:function(msg){ /*actions on success of the request*/ }); });
这样，“target_for_the_form_treatment”应该接收POST数据，就好像一个表单被发送给他一样（从post [1] = 1开始，但是为了实现这个解决scheme，我会build议处理data_str的尾部'＆'） 。
仍然我不喜欢这个解决scheme，但我不得不使用TABLE结构，因为dataTables的jQuery插件…
我迟到了，但这对我很好，代码应该自己解释;
<script type="text/javascript"> function formAJAX(btn){ var $form = $(btn).closest('[action]'); var str = $form.find('[name]').serialize(); $.post($form.attr('action'), str, function(data){ //do stuff }); } <script>
HTML：
<tr action="scriptURL.php"> <td> Field 1:<input type="text" name="field1"/> </td> <td> Field 2:<input type="text" name="field2" /> </td> <td><button type="button" onclick="formAJAX(this)">Update</button></td> </tr>
