Come per consentire all'utente di inserire elementi in una tabella HTML

Question

voglio permettere all'utente di inserire una lista di persone in un'applicazione web, e poi inviarli come un unico lotto. Ogni riga appare grosso modo così:

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

Il modulo inizia con una sola fila di ingressi vuoti, e voglio una fila fresco aggiunto all'elenco ogniqualvolta i riempimenti utente in qualsiasi campo - cioè l'elenco cresce su richiesta. Allo stesso modo, voglio una riga a scomparire quando l'utente pulisce tutti i campi in esso.

Qual è il modo più semplice, più robusta e più gestibile per implementare questo?

Infine, Come invio questa tabella di valori al server? Qual è il modo migliore per nominare ogni campo in modo che il server possa creare una lista di entità Person in base ai valori inseriti?

Answer 1

Se si ha familiarità con jQuery, è possibile utilizzare il gestore .Per passare alla loro cattura modificando il campo. Test per vedere se è l'ultima riga e se non ci sono dati in essa contenuti. Se hanno preso tutto fuori dalla fila, rimuoverlo. jQuery ha alcuni ottimi modi per fare questo, ma è tutto dipende da come si vuole scrivere. In caso affermativo, aggiungere la nuova riga utilizzando la funzione .Append di jQuery. Se si sta utilizzando Python e cgi_app e si utilizza lo stesso attributo nome per ogni tipo di cella, è possibile utilizzare form.getlist ( 'fname []') e restituirà un array dei nomi.

Answer 2

Qual è il modo migliore per nominare ogni campo in modo che il server possa creare una lista di entità persona sulla base dei valori immessi?

Si può fare:

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

che genera serie 'persona'

Answer 3

JQuery è un buon suggerimento, ma se non si desidera utilizzarlo, è possibile provare nome dell'ingresso di generazione aggiungendo un indice. Ad esempio:

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

dove "N" è l'indice di riga. In questo modo può aiutare a ottenere facilmente l'intero valori un'intera fila utilizzando (ie) $ GET [ 'persona '. $ I.'fname '], $ GET [' persona '$ i.'lname'] ... e così via.

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>

Non ho familiarità con lo scripting server-side, quindi la mia risposta solo parziale. Ecco un esempio . Inoltre, vi consiglio di aggiungere convalida dell'input di JS.