HTML：是否有可能有一个XHTML有效的方式在每个表行FORM标记？(HTML: Is it po

我最能形容这个如下：

我想这（在整个表editmode ，节省每一行中的按钮）。

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</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>标签？

Answer 1:

你不能。 你唯一的选择就是这种分成多个表，并把表单标签之外吧。 你可能最终筑巢你的表，但不建议这样做：

<table>
  <tr><td><form>
    <table><tr><td>id</td><td>name</td>...</tr></table>
  </form></td></tr>
</table>

我会完全删除的表和与风格的HTML元素，如div的，跨越更换。

Answer 2:

值得一提的是，这是可能的HTML5，使用输入元素“形式”的属性：

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</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工作。

Answer 3:

我也有类似的问题， 这个答案在问题HTML：形式表？ 解决了这个问题对我来说。 （不知道这是XHTML，但它在HTML5的浏览器。）

您可以使用CSS给表格布局的其他元素。

.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>

Answer 4:

你只需把<form ... >的标记之前<table>标签和</form>底。

Hopte它帮助。

Answer 5:

我说你可以，但它不验证和Firefox将会重新安排代码（所以你在“查看生成的源”看到使用Web开发人员可能还有惊喜）。 我不是专家，而是把

<form action="someexecpage.php" method="post">

就在前面的

<tr>

然后使用

</tr></form>

在该行的末尾给出肯定的功能（在Firefox，铬和IE7-9测试）。 工作对我来说，即使验证错误的它生产的数量是一个新的个人最好/最差！ 看到没有什么问题，因此，我有相当多样式表。 我猜你可能有一个动态生成的表，我做的，这就是为什么解析表行是有点不明显对于我们凡人。 所以基本上，打开窗体在该行的开始，只是该行结束后关闭。

Answer 6:

如果试图以添加一个翘曲这样tr元素

<table>
<form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</form>
</table>

在渲染过程中的一些浏览器会在声明离开元件的外部输入后关闭表单标签权

这样的事情

<table>
    <form></form>
    <tr>
    <td><input type="text"/></td>
    <td><input type="submit"/></td>
    </tr>
    </table>

这个问题仍然是成立的翘曲多个表格单元格

正如stereoscott上面所说的，嵌套表是不推荐的可能解决方案。 避免使用表。

Answer 7:

其实我有一个表中的每一行的形式问题，与JavaScript（实际上的jQuery）：

像Lothre1说，“在渲染过程中的一些浏览器将右后声明离开元件的外部输入关闭表单标签”

这让我输入字段以外的形式，所以我无法通过使用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>

我仍然在寻找一个干净的解决方案（虽然使用TR“身份证”参数走DOM将解决这一特定问题）

脏溶液将是（jQuery的）：

$('#tr_id :input').each(function(){/*action*/});
// this will select all the inputS
// fields within the TR with the id='tr_id'

上述为例的工作，但它不是真正的“干净”的，因为它指的是TR，而不是形式，它需要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数据，就好像一个形式发送给他（从柱[1] = 1 APPART，但要实现此解决方案，我将推荐处理的data_str的尾随“＆”代替） 。

可是我还是不喜欢这个解决办法，但我被迫使用，因为数据表jQuery插件的表结构...

Answer 8:

林迟到了，但是这对我来说真是棒极了，代码应该解释本身;

<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>

文章来源: HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?