Comment permettre à l'utilisateur d'entrer des éléments dans un tableau HTML

Question

Je veux permettre à un utilisateur d'accéder à une liste de personnes dans une application Web, puis les soumettre comme un lot. Chaque ligne ressemble à peu près comme ceci:

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

La forme commence avec une seule rangée d'entrées vides, et je veux une nouvelle ligne ajoutée à la liste chaque fois que les remplissages de l'utilisateur dans l'un des champs - à savoir la liste s'allonge sur demande. De même, je veux une ligne à disparaître chaque fois que l'utilisateur efface tous les champs en elle.

Quelle est la meilleure et la plus robuste et la plus maintenable à mettre en œuvre ce?

Enfin, comment puis-je soumettre ce tableau des valeurs au serveur? Quelle est la meilleure façon de nommer chaque champ afin que le serveur peut créer une liste d'entités Person sur la base des valeurs saisies?

Answer 1

Si vous êtes familier avec jQuery, vous pouvez utiliser le gestionnaire de .Modification pour les attraper changer le champ. Test pour voir si elle est la dernière ligne et s'il y a des données qu'il contient. S'ils ont tout pris de la ligne, retirez-le. jQuery a quelques bonnes façons de le faire, mais il est tout dépend de la façon dont vous voulez écrire. Dans ce cas, ajoutez la nouvelle ligne en utilisant la fonction .append jQuery. Si vous utilisez Python et cgi_app et que vous utilisez le même attribut name pour chaque type de cellule, vous pouvez utiliser form.getlist ( « nom_fichier [] ») et il retourne un tableau des noms.

Answer 2

  

Quelle est la meilleure façon de nommer chaque champ afin que le serveur peut créer une liste d'entités personne, les valeurs saisies?

Vous pouvez faire:

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

Ce qui génère array 'personne'

Answer 3

JQuery est une bonne suggestion, mais si vous ne voulez pas l'utiliser, vous pouvez essayer de générer le nom d'entrée en ajoutant un index. Par exemple:

<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>

où « N » est l'indice de ligne. De cette façon, peut vous aider à obtenir facilement les valeurs entières entières de ligne en utilisant (ie) $ GET [ 'personne '. $ I.'fname '], $ GET [' personne '$ i.'lname'] ... et ainsi de suite.

Answer 4

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>

Je ne suis pas familier avec les scripts côté serveur, donc ma réponse partielle. Voici un exemple . De plus, je vous recommande d'ajouter la validation d'entrée par JS.