Question

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

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

<td>可以包含表单，对吧？ <td>可以跨多个列吗？也许行只应该是跨越表的所有列的<td>？那会有用吗？

Answer 1

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

<!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]等。

Answer 2

你可以使用jQuery＆amp; 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');
});
});

Answer 3

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

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

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

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

3 个答案: