Question

我有一个有桌子的页面。在表格的每一行中，都有关于在线杂货配送订单的数据。在每一行的末尾，有一个提交按钮，关于要对订单执行的操作，表单在那里结束。新表单从下一行＆lt; tr＆gt;

开始

我应该把＆lt; form＆gt;放在哪里？和＆lt; / form＆gt;标签？我应该把＆lt; form＆gt;在每个＆lt; tr＆gt;之前和＆lt; / form＆gt;在＆lt; / tr＆gt;之后或者我应该在第一个数据单元中引入它们＆lt; td＆gt;每一行并在最后一次＆lt; td＆gt;？

中关闭

我的意思是，页面可能在两种方式都可以正常运行，但是什么是＆＃34;正确的＆＃34;这样做的方式？现在，mozilla代码视图以红色显示表标记。

这就是它现在的样子。

这是我用来为每个表行动态生成新表单的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;

Answer 1

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>

Answer 2

如果可以选择使用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 个答案: