2012-11-27 42 views
0

我試圖創建一個按鈕,每次按下時它都會生成已經形成了格式的div。

divs由表單組成,它們的字段應該已經被存儲在javascript中的變量中的數據填充。用jquery創建動態div

例如。

<div id="myDiv_#"> 
<form id="myForm"> 
<input type="text" id="start_date" name="start_date" value="someJavascriptVariable" /> 
<input type="text" id="end_date" name="end_date" value="someJavascriptVariable" /> 
<select name="type" id="type"> 
<option value="1">"someJavascriptVariable"</option> 
<option value="2">"someJavascriptVariable"</option>    
</select> 
<input type="button" id="new_button" value="Show"> 
</form> 
</div> 

<script> 
$('#button_push').click(function() 
{ 
//creating myDiv_# 
} 
</script> 

我在尋找角落找尋網絡,但從來沒有發現良好的效果:■ 林問你這方面的幫助,也許是引導線或起點。 重點是,每當用戶按下按鈕,一個新的div被創建上面的參數。

乾杯

+2

看看@ http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery –

回答

2

隨着標記一樣複雜,如果有它的一個隱藏的版本,它可以克隆,根據需要修訂的則屬性附加到頁面可能更容易。

事情是這樣的:

<div id="container"></div> 

<div style="display: none;"> 
    <div id="myDiv_#"> 
     <form id="myForm"> 
      <input type="text" id="start_date" name="start_date" value="someJavascriptVariable" /> 
      <input type="text" id="end_date" name="end_date" value="someJavascriptVariable" /> 
      <select name="type" id="type"> 
       <option value="1">"someJavascriptVariable"</option> 
       <option value="2">"someJavascriptVariable"</option>     
      </select> 
      <input type="button" id="new_button" value="Show"> 
     </form> 
    </div> 
</div> 
$('#button_push').click(function() { 
    var $div = $("#myDiv_\\#").clone(true); // keep events' 
    $div.attr('id', '').addClass('clone'); // example of amending attributes 
    $("#container").append($div); // append 
}); 

Example fiddle

您可以輕鬆地與特定變量有關該克隆例如更換someJavascriptVariable串了。

+0

我會測試它,並給予一些反饋:)謝謝。 – pleaseDeleteMe