代码之家 › 专栏 › 技术社区 › Tony the Pony

如何允许用户在HTML表中输入元素

data-entry user-interface html javascript

Tony the Pony · 技术社区 · 14 年前

我希望允许用户在Web应用程序中输入人员列表,然后将其作为一批提交。每行大致如下:

<TR>
    <TD> <INPUT name="person.fname"> </TD>
    <TD> <INPUT name="person.lname"> </TD>
    <TD> <INPUT name="person.birthdate"> </TD>
</TR>

表单以一行空白输入开始,我希望每当用户填充任何字段时,都向列表中添加一行新的输入,即列表按需增长。同样,每当用户清除其中的所有字段时,我希望一行消失。

实现这一点的最简单、最健壮和最可维护的方法是什么?

最后,如何将这个值表提交回服务器?为每个字段命名的首选方法是什么,以便服务器可以创建 Person 基于输入值的实体?

4 回复 | 直到 14 年前

Chris 14 年前

如果您熟悉jquery,则可以使用.change处理程序捕获它们更改字段。测试它是否是最后一行,以及其中是否有数据。如果他们把这排的东西都拿走了,就把它移走。jquery有一些很好的方法来实现这一点,但这都取决于您想如何编写它。如果是这样,请使用jquery的.append函数附加新行。如果您使用的是python和cgi_app,并且对每种类型的单元格使用相同的name属性,那么您可以使用form.getlist(“fname[]”),它将返回一个名称数组。

Wouter Dorgelo voy 14 年前

为每个字段命名的首选方法是什么,以便服务器可以根据输入的值创建人员实体列表?

你可以这样做:

<TR>
    <TD> <INPUT name="person[fname]"> </TD>
    <TD> <INPUT name="person[lname]"> </TD>
    <TD> <INPUT name="person[birthdate]"> </TD>
</TR>

生成数组“person”

Etha 14 年前

jquery是一个很好的建议,但是如果不想使用它,可以尝试通过附加索引来生成输入名称。例如:

<TR>
<TD> <INPUT name="person_0.fname"> </TD>
<TD> <INPUT name="person_0.lname"> </TD>
<TD> <INPUT name="person_0.birthdate"> </TD>
</TR>
...
<TR>
<TD> <INPUT name="person_N.fname"> </TD>
<TD> <INPUT name="person_N.lname"> </TD>
<TD> <INPUT name="person_N.birthdate"> </TD>
</TR>

其中“n”是行索引。这种方法可以帮助您通过使用(即)轻松获取整行的值。$ 得到某人 '$I.'Fname','$ 得到某人 '$I.''lname''。等等。

Klaster_1 ÐÐµÑ Ð²Ð¾Ð¹Ð½Ðµ 14 年前

CSS:

input:not(:first-of-type){
    display:none}

jquery:查询:

$('input').click(function(){
    $(this).val('');
}).blur(function(){
    if($(this).val().length>1){
        $(this)
            .toggleClass('processed')
            .hide('slow')
            .parents('#person').find('input:not(.processed):first').show('slow'); 
    }
});
$('#person').prepend('Click on blank space to proceed<br/>');

HTML:

<tr>
    <form id=person method=post action='/your_page_on_server'>
        <td><input name="fname" value='Enter the first name'/></td>
        <td><input name="lname" value='Enter the last name'/></td>
        <td><input name="birthdate" value='Enter the birth date'/></td>
        <td><input type=submit value='Submit'/></td>
    </form>
</tr>

我不熟悉服务器端脚本,所以我的回答只是部分的。这是一个 example . 另外,我建议添加JS的输入验证。