HTMLフォームに行を追加するにはどうすればよいですか？

Question

私は、一連のドロップダウンまたはテキストボックスのある単純なアプリケーションを作っています。ユーザーがこれらを入力すると、結果の文字列が連結され、ユーザーに表示されます。今私は、ユーザーが '+'ボタンを押して行を追加することができるシンプルな機能が必要です。理想的には、上記の行をコピーする（入力を含む）必要があります。だから、例えば私が持っている：

concatenated string

dropdown

dropdowntextboxtextboxは、どのように私は単純に、ユーザが入力したものを含めて、上記の行（マイナス連結した文字列）をコピーすることができます。簡単ならば、今のところ上記の行を追加するだけで良いでしょう。私は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()を使用してクローンの値をクリアすることを覚えておいてください。