Как добавить строку в HTML-форму?

Я делаю простое приложение, в котором есть серия выпадающих списков или текстовых полей. После того, как пользователь заполнил их в результирующих строках, они затем объединяются и отображаются пользователю. Теперь мне нужна простая функция, когда пользователь может нажать кнопку "+" и добавить строку. В идеале мне нужно, чтобы следующая строка была скопирована (включая входы). Так, например, у меня есть:

dropdown textbox textbox dropdown

concatenated string

Как я могу просто скопировать строку выше (минус конкатенированная строка), включая то, что пользователь ввел. Если было бы проще просто добавить вышеперечисленную строку на данный момент, было бы хорошо. Я использую JavaScript... здесь код для формы, например:

<form action=""> <select id="servetype" title="Serve Type"> <option>STD – Standard trafficking type</option> <option>SSV – Site-served</option> <option>PIX – Pixel</option> <option>CCD – Click command</option> <option>PCC – Pixel and Click command</option> <option>RMV – Rich Media Video</option> <option>RME – Rich Media Expand</option> <option>RMO – Rich Media Other</option> </select>
</form>

Это просто или мне нужно использовать DOM и использовать createElement т.д.? Было бы проще, если бы это было сделано в таблице?

Чтобы быть ясным, я пытаюсь НЕ использовать JQuery... Я готов переключиться, если это будет проще сделать так.

1 ответ

Добавьте кнопку плюс рядом с каждым вводом и дайте им класс addRow (например).

.addRow функцию для события .addRow click:

$(".addRow").click(function(){ $(this) .prev("input") // select the previous input element .clone() // clone said element .appendTo("#formID"); // append the clone to the form
});

Имейте в виду, что это также приведет к клонированию существующих значений входов, поэтому вы можете очистить значение клона с помощью val() перед его добавлением.

licensed under cc by-sa 3.0 with attribution.