HTML 양식에 행을 추가하려면 어떻게해야합니까?

Question

드롭 다운이나 텍스트 상자가있는 간단한 앱을 만들고 있습니다. 일단 사용자가 결과 문자열에 이들을 채우면 연쇄되어 사용자에게 표시됩니다. 이제 사용자가 '+'버튼을 눌러 행을 추가 할 수있는 간단한 함수가 필요합니다. 이상적으로 위의 행을 복사해야합니다 (입력 포함). 그래서 예를 들어 내가 가진 :

concatenated string

dropdown

dropdowntextboxtextbox 어떻게 단순히 사용자가 입력 된 것을 포함하여, 위의 행 (마이너스 연결된 문자열)를 복사 할 수 있습니다. 간단하다면 위에 행을 추가하는 것이 좋습니다.

<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()를 사용하여 복제의 값을 취소 할 수 있도록.