当前位置：文江博客话题详情

如何标记表格，使每一行都是可提交的表单？

发布于 2024-11-27 02:24:26 字数 223 浏览 0 评论 0原文

我需要允许我的用户将新记录插入我的数据库 - 给我的界面是一个表。当用户在表的所有单元格中完成数据输入后，他们将单击该行的“保存”按钮。该按钮需要通过 POST 提交该行的字段值。

符合 W3C 标准且语义正确的正确标记是什么？

可以包含表单，对吧？可以跨越多列吗？也许行应该只是一个跨越表格所有列的？那行得通吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

往日情怀 2024-12-04 02:24:26

您将数据作为数组提交，然后在服务器端代码中循环遍历它。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CRUD Table</title>
</head>
<body>
    <form action="#" method="post">
        <table>
            <tr>
                <td><input name="data[0][name]"/></td>
                <td><input name="data[0][lastname]"/></td>
            </tr>
            <tr>
                <td><input name="data[1][name]"/></td>
                <td><input name="data[1][lastname]"/></td>
            </tr>
       </table>
       <p><input type="submit" value="Save" /></p>
    </form>
</body>
</html>

填写第一行后，让 jQuery 添加另一行。您唯一需要注意的是为每一行生成一个不同的 id：data[0]、data[1] 等。

You submit the data as an array, then loop through it in your serverside code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CRUD Table</title>
</head>
<body>
    <form action="#" method="post">
        <table>
            <tr>
                <td><input name="data[0][name]"/></td>
                <td><input name="data[0][lastname]"/></td>
            </tr>
            <tr>
                <td><input name="data[1][name]"/></td>
                <td><input name="data[1][lastname]"/></td>
            </tr>
       </table>
       <p><input type="submit" value="Save" /></p>
    </form>
</body>
</html>

Have jQuery add another row as soon as you fill in the first one. The only thing you need to watch that you generate a distinct id for each row: data[0], data[1], etc.

回复收藏 0 原文

燃情 2024-12-04 02:24:26

你可以使用 jQuery & 来实现这一点。 AJAX ..

说你的标记是

<table>
<tr>
<td> <field> </td><td> <field> </td><td> <field> </td><td> <field> </td><td> <field> </td>
</tr>
...
</table>

你的 jQuery 会像..

// event for every row's button click
$("table tr").filter(".SubmitButton").click(function(){
// this would create the param list of all the fields in the row 
var content=$(this).parent().parent().serialise();
// send to server
$.post('url',content,function(){
alert('Row Submitted');
});
});

you can achieve this using jQuery & AJAX..

say your markup is

<table>
<tr>
<td> <field> </td><td> <field> </td><td> <field> </td><td> <field> </td><td> <field> </td>
</tr>
...
</table>

your jQuery would be like..

// event for every row's button click
$("table tr").filter(".SubmitButton").click(function(){
// this would create the param list of all the fields in the row 
var content=$(this).parent().parent().serialise();
// send to server
$.post('url',content,function(){
alert('Row Submitted');
});
});

回复收藏 0 原文

肥爪爪 2024-12-04 02:24:26

我想说，不可能以这种方式将表格与表单混合在一起。 表单不能在不包含整个表格的情况下包含一行，而您使用一个大跨越所有列的想法会使表格语义上不正确< /强>。在这种情况下，您将拥有一个列表，而不是表格。

您可以创建一个一个大型表单，其中包含表格和所有输入。

您的服务器可以通过识别单击的按钮来决定应该保存哪些记录。 （但请注意 Internet Explorer - 它可能仍然存在该错误，即使只单击了一个按钮，它也会发送所有按钮）。
然而，发送的数据量可能相当大，所以也许你可以使用 JavaScript 某种方式？例如，禁用不属于包含单击按钮的行的控件？