Cómo permitir al usuario introducir los elementos en una tabla HTML

Question

Quiero permitir a un usuario introducir una lista de personas en una aplicación web y, a continuación, enviarlos como un lote. Cada fila se ve más o menos así:

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

La forma comienza con una sola fila de las entradas en blanco, y quiero una fila fresco añadido a la lista cada vez que los rellenos de usuario en cualquiera de los campos - es decir, la lista crece bajo demanda. Del mismo modo, quiero una fila a desaparecer cada vez que el usuario borra todos los campos en el mismo.

¿Cuál es la manera más fácil, más robusto y más fácil de mantener para implementar esto?

Por último, ¿Cómo envío esta tabla de valores de vuelta al servidor? ¿Cuál es la mejor forma de nombrar cada campo para que el servidor puede crear una lista de entidades Person en base a los valores introducidos?

Answer 1

Si está familiarizado con jQuery, puede utilizar el controlador de .Cambiar atraparlos cambiando el campo. Prueba para ver si es la última fila y si hay datos en ella. Si han tomado todo de la fila, y eliminar. jQuery tiene algunas grandes maneras de hacer esto, pero es todo depende de cómo desea escribir en él. Si es así, añadir la nueva fila usando la función .Append de jQuery. Si está utilizando Python y cgi_app y utilizar el mismo atributo de nombre para cada tipo de célula, puede utilizar form.getlist ( 'fname []') y ha de devolver una matriz con los nombres.

Answer 2

¿Cuál es la mejor forma de nombrar cada campo para que el servidor puede crear una lista de entidades persona basado en los valores introducidos?

Puede hacer:

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

¿Qué genera array 'persona'

Answer 3

jQuery es una buena sugerencia, pero si usted no desea utilizarlo, puede intentar nombre de la entrada de generación añadiendo un índice. Por ejemplo:

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

donde "N" es el índice de la fila. De esta manera puede ayudar a conseguir fácilmente la totalidad de los valores de las filas enteras mediante el uso (es decir) $ GET [ 'persona '. $ I.'fname '], $ GET [' persona '$ i.'lname'] ... y así sucesivamente.

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>

No estoy familiarizado con el script del lado del servidor, por lo que mi respuesta en sólo parcial. He aquí un ejemplo . Además, recomiendo añadir validación de entrada de JS.