在表格的每一行中发布新表格的正确方法？答案

【问题标题】：Proper way to post a new form in each row of a table?在表格的每一行中发布新表格的正确方法？
【发布时间】：2016-12-13 03:29:03
【问题描述】：

我有一个页面，其中有一张桌子。在表格的每一行中，都有关于在线杂货配送订单的数据。在每一行的末尾，有一个提交按钮，说明要对订单执行的操作，表单到此结束。新表单从下一行开始

我应该把

标签放在哪里？我应该将

放在每个之前，将放在之后，还是应该将它们引入每行的第一个数据单元并在最后一个中关闭？

我的意思是，该页面可能会以两种方式正常运行，但“正确”的方式是什么？现在 mozilla 代码视图以红色显示 table 标签。

这就是现在的样子。

这是我用来为每个表格行动态生成新表单的 php 代码的相关部分。我发布这个只是为了参考，因为这在这里根本不重要。我的问题是基于基本的 HTML，而不是基于 php。

for($i=0;$i<$count;++$i){
    $res.='<form action="" method="post">' ."\n" .'<input type="hidden" name="orderid" value="' .$orders[$i]->idcode .'" />';
    $res.="$nt<tr><td align=\"center\">" .$orders[$i]->display("pe","</td><td align=\"center\">") ."</td>$nt\t<td align=\"center\"><select name=\"agent\">$alistcode</select></td>$nt\t<td align=\"center\"><select name=\"vendor\">$vlistcode</select></td>";
    $res.="$nt\t<td align=\"center\"><input type=\"submit\" value=\"PROCESS\" /></td>\n</tr>\n</form>\n";
}
$res.="</table>";
echo $res;

【问题讨论】：

HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?的可能重复
最好的解决方案是不使用<table> 布局。如果您真的需要，请使用 CSS 表格布局。这是欺骗中的第二个答案。
在每行的第一个中引入新的表单并在每行的最后一个单元格中结束它会是“正确” 的编程习惯吗？跨度>
如果没有指定，<tbody> 元素会放在<table> 元素内。 <tbody> 元素的唯一有效子元素是 <tr> 元素。 <tr> 元素的唯一有效子元素是 <th> 或 <td>。因此，在 HTML 规范中确实没有任何空间可容纳 <form> 元素。一些浏览器会允许它，但它并不总是有效。
@YoustayIgo <td><form></td>...<td></form></td> 是最糟糕的做法。

【解决方案1】：

如果使用 javascript 是一种选择，您可以不使用<form> 标签工作吗？我在这个例子中使用了 jQuery，数据被发布到自己（$.post() 的第一个参数）。

表格

<table>
        <tbody>
            <tr>
                <td><input name="inputfield[]" type="text" value="input1" /></td>
                <td><select name="selectfield[]">
                    <option selected value="select1-option1">select1-option1</option>
                    <option value="select1-option2">select1-option2</option>
                    <option value="select1-option3">select1-option3</option>
                </select></td>
                <td><a class="submit">Update</a></td>
            </tr>
            <tr>
                <td><input name="inputfield[]" type="text" value="input2" /></td>
                <td><select name="selectfield[]">
                    <option selected value="select2-option1">select2-option1</option>
                    <option value="select2-option2">select2-option2</option>
                    <option value="select2-option3">select2-option3</option>
                </select></td>
                <td><a class="submit">Update</a></td>
            </tr>
            <tr>
                <td><input name="inputfield[]" type="text" value="input3" /></td>
                <td><select name="selectfield[]">
                    <option selected value="select3-option1">select3-option1</option>
                    <option value="select3-option2">select3-option2</option>
                    <option value="select3-option3">select3-option3</option>
                </select></td>
                <td><a class="submit">Update</a></td>
            </tr>
        </tbody>
    </table>

脚本

$(".submit").on("click", function(){
    var row = $(this).parents("tr");
    $.post("", row.find("input, select, radio").serialize(), function(data){ console.log(data); });
});

JSFiddle

【讨论】：

【解决方案2】：

HTML5 为您的问题提供了不错的解决方案。它的名字是form 属性。只需将表单放入最后一个<td> 并从其他输入中引用其id。见例子。

<table>
    <tr>
        <td>
            <input type="text" name="inp1" form="form1" />
        </td>                         <!-- ^^^^  ^^^^^ -->
        <td>
            <form id="form1" method="get" action="/">
             <!-- ^^  ^^^^^ -->
                <input type="submit" name="submit1" value="submit" />
            </form>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" name="inp2" form="form2" />
        </td>
        <td>
            <form id="form2" method="get" action="/"><input type="submit" name="submit2" value="submit" /></form>
        </td>
    </tr>
</table>

【讨论】：

这里的问题是我在每个中有 2 个（或更多）表单对象。不过感谢您的努力。赞成
是的，您可以在每行中添加更多输入、选择、文本区域，并为每个添加 form 属性。该示例仅显示了一个简短的“外部”输入。关键是将<form> 元素放在一个<td> 中。
是的，这是众所周知的 IE 问题。见stackoverflow.com/questions/20658402/…