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

Question

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

dropdown textbox textbox dropdown

concatenated string

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

<form action="">
  <input type="text" id="site" value="Site" title="Site" onfocus="clickclear(this, 'Site')" onblur="clickrecall(this,'Site')" />
  <input type="text" id="placementdesc" value="Placement description" title="Placement description" onfocus="clickclear(this, 'Placement description')" onblur="clickrecall(this,'Placement description')" />
  <input type="text" id="placementtype" value="Placement Type" title="Placement Type" onfocus="clickclear(this, 'Placement Type')" onblur="clickrecall(this,'Placement Type')" />
  <input type="text" id="size" value="Size" title="Size" onfocus="clickclear(this, 'Size')" onblur="clickrecall(this,'Size')" />
  <input type="text" id="pricing" value="Pricing" title="Pricing" onfocus="clickclear(this, 'Pricing')" onblur="clickrecall(this,'Pricing')" />
  <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 ... Я готов переключиться, хотя, если это проще сделать таким образом.

Answer 1

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

Сопоставьте функцию с событием нажатия .addRow:

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

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