ユーザーがHTMLテーブルに要素を入力できるようにする方法

StackOverflow https://stackoverflow.com/questions/4185046

質問

ユーザーがWebアプリケーションに人のリストを入力できるようにしてから、1つのバッチとして提出したいと考えています。各行はこのように見えます：

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

フォームは、空白の入力の1つの行から始まり、ユーザーがフィールドのいずれかを埋めるたびに、リストに新鮮な行を追加したいと思います。つまり、リストは需要が高くなります。同様に、ユーザーがその中のすべてのフィールドをクリアするたびに、行が消えたいと思います。

これを実装するための最も簡単で、最も堅牢で、最も維持可能な方法は何ですか？

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

役に立ちましたか？

解決

jQueryに精通している場合は、.changeハンドラーを使用してフィールドを変更することができます。最後の行であるかどうか、およびデータが含まれているかどうかを確認します。彼らがすべてを列から取り出した場合は、それを削除します。 JQueryにはこれを行うための素晴らしい方法がいくつかありますが、それはすべてあなたがそれを書きたい方法に依存しています。その場合は、jQueryの.append関数を使用して新しい行を追加します。 PythonとCGI_APPを使用しており、各タイプのセルに同じ名前属性を使用する場合、form.getList（ 'fname []'）を使用でき、名前の配列が返されます。

他のヒント

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

できるよ：

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

配列「人」を生成する

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 ['人'。$ i.'fname']、$get ['人'。$ i.'lname'] ...など。

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による入力検証を追加することをお勧めします。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top