4

ユーザーがWebアプリケーションに人物のリストを入力し、それらを1つのバッチとして送信できるようにしたい。各行はおおよそ次のようになります。

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

フォームは空白の入力の単一行で始まります。ユーザーがいずれかのフィールドに入力するたびに、リストに新しい行を追加する必要があります。つまり、リストはオンデマンドで大きくなります。同様に、ユーザーがその中のすべてのフィールドをクリアするたびに行が消えるようにしたいです。

これを実装するための最も簡単で、最も堅牢で、最も保守しやすい方法は何ですか？

最後に、この値のテーブルをサーバーに送信するにはどうすればよいですか？Personサーバーが入力された値に基づいてエンティティのリストを作成できるように、各フィールドに名前を付けるための好ましい方法は何ですか？

4

4 に答える 4

4

jQueryに精通している場合は、.changeハンドラーを使用して、フィールドの変更をキャッチできます。それが最後の行であるかどうか、およびその中にデータがあるかどうかを確認するためにテストします。彼らが列からすべてを取り出した場合は、それを削除します。jQueryにはこれを行うための優れた方法がいくつかありますが、それはすべて、どのように記述したいかによって異なります。その場合は、jQueryの.append関数を使用して新しい行を追加します。Pythonとcgi_appを使用していて、セルのタイプごとに同じname属性を使用している場合は、form.getlist（'fname []'）を使用すると、名前の配列が返されます。

于 2010-11-15T14:06:10.157 に答える
2

サーバーが入力された値に基づいてPersonエンティティのリストを作成できるように、各フィールドに名前を付けるための好ましい方法は何ですか？

できるよ：

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

配列'person'を生成します

于 2010-11-15T14:16:26.310 に答える
0

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」は行インデックスです。この方法では、（つまり）$ GET['person '。$i.'fname']、$ GET['person '。$i.'lname']..を使用して、行全体の値を簡単に取得できます。等々。

于 2010-11-15T14:16:29.970 に答える
0

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>

私はサーバーサイドスクリプトに精通していないので、私の答えは部分的です。これが例です。また、JSによる入力検証を追加することをお勧めします。

于 2010-11-15T14:35:58.327 に答える