Как разрешить пользователю вводить элементы в таблицу HTML

Question

Я хочу разрешить пользователю вводить список лиц в веб-приложении, а затем отправлять их как один пакет.Каждая строка выглядит примерно так:

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

Форма начинается с одной строки пустых вводов, и я хочу, чтобы новая строка добавлялась в список всякий раз, когда пользователь заполняет любое из полей, т.е.список растет по требованию.Кроме того, я хочу, чтобы строка исчезала всякий раз, когда пользователь очищает все поля в ней.

Какой самый простой, надежный и удобный в обслуживании способ реализовать это?

Наконец, как мне отправитьэта таблица значений обратно на сервер?Каков предпочтительный способ присвоения имен каждому полю, чтобы сервер мог создать список Person сущностей на основе введенных значений?

Answer 1

Если вы знакомы с jQuery, вы можете использовать обработчик .change, чтобы поймать их при изменении поля.Проверьте, является ли это последняя строка и есть ли в ней данные.Если они вынули все из ряда, удалите это.У jQuery есть несколько отличных способов сделать это, но все зависит от того, как вы хотите это написать.Если это так, добавьте новую строку с помощью функции japu's .append.Если вы используете Python и cgi_app и используете один и тот же атрибут name для каждого типа ячеек, вы можете использовать form.getlist ('fname []'), и он вернет массив имен.

Answer 2

Каков предпочтительный способ присвоения имен каждому полю, чтобы сервер мог создать список сущностей Person на основе введенных значений?

Вы можете сделать:

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

, который генерирует массив 'person'

Answer 3

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.

Answer 4

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'] ... и т. д.