Как добавить строку в 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.