文章/答案/技术大牛

发布

社区首页 >问答首页 >在表格的每一行中发布新表单的正确方式？

问在表格的每一行中发布新表单的正确方式？
EN

Stack Overflow用户

提问于 2016-08-07 12:21:56

回答 2查看 3.5K关注 0票数 1

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

我到底应该把和标签放在哪里？我应该将放在each之前和之后，还是应该在每行的第一个数据单元格中引入它们，并在最后一个数据单元格中结束

我的意思是，页面可能在两种方式下都能正常工作，但什么是“适当”的方式呢？现在，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;

html

forms

html-table

回答 2

Stack Overflow用户

发布于 2016-08-10 09:22:15

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>

票数 9

Stack Overflow用户

发布于 2020-06-28 22:14:13

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38810850

复制

相似问题

问在表格的每一行中发布新表单的正确方式？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在表格的每一行中发布新表单的正确方式？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在表格的每一行中发布新表单的正确方式？
EN