HTML＆JS - 如何顯示不止一次包含一個文本字段的DIV

Question

我是新開發的。現在我在窗體中有一個需求，因爲我需要用添加和刪除按鈕來顯示一個字段。如果用戶點擊添加按鈕，應用程序應該再顯示一個字段。如果用戶點擊刪除按鈕，應用程序應該隱藏相應的字段。

請教我如何讓文本字段多次顯示。此外，我需要在PHP中獲取文本字段數據，因此我應該爲字段使用不同的名稱。

預先感謝您！

拉賈

Answer 1

它必須對你有幫助。

HTML：

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2> 

<div id="p_scents"> 
<p> 
    <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" /></label> 
</p> 
</div> 

的CSS：

* { font-family:Arial; } 
h2 { padding:0 0 5px 5px; } 
h2 a { color: #224f99; } 
a { color:#999; text-decoration: none; } 
a:hover { color:#802727; } 
p { padding:0 0 5px 0; } 

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; } 

的javascript：

$(function() { 
    var scntDiv = $('#p_scents'); 
    var i = $('#p_scents p').size() + 1; 

    $('#addScnt').live('click', function() { 
      $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv); 
      i++; 
      return false; 
    }); 

    $('#remScnt').live('click', function() { 
      if(i > 2) { 
        $(this).parents('p').remove(); 
        i--; 
      } 
      return false; 
    }); 
}); 

感謝