向動態jQuery表單添加元素

我必須創建一個動態表單。結構是：每個Cap。可以有很多段落，並且表格可以有很多Cap。向動態jQuery表單添加元素

這裏有一個例子：http://jsfiddle.net/michelejs/UX5bz/

我想，如果我添加了一個段落就會在正確的字段集添加。我怎樣才能做到這一點？

來源

2011-07-06 michele

什麼是正確的字段集？每當您根據代碼添加段落時，您都要添加fieldset元素... – Fosco

我會爲每個帽子和他的段落創建一個字段集。段落將被添加到fieldset cap上。 – michele

你可以使用這樣的事情：http://jsfiddle.net/UX5bz/7/

這是使用.parent()定位在哪裏追加：

$(elem).parent().append(htmlcode);

來源

2011-07-06 12:55:14 Qtax

非常感謝！ – michele

這裏是你的代碼的工作版本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     var capitoli = 1; 

     $('#addCap').live("click", function() { 
      capitoli = capitoli + 1; 
      var htmlcode = '<fieldset id="capitolo1">' + '<legend>Cap' + capitoli + '</legend>' + '<input type="text" value=""/>' + '<input type="button" class="addParag" value="Add Paragraph"></fieldset>'; 

      $("#frm").append(htmlcode); 

     }); 

     $('.addParag').live("click", function() { 
      var htmlcode = '<fieldset id="parag">' + '<legend>Paragraph</legend>' + '<input type="text" value="name paragraph"/>' + '<input type="button" id="removeParagrafo" value="Remove Paragraph"></fieldset>'; 
      $(this).parents("fieldset").append(htmlcode); 

     }); 
    }); 
</script> 
</head> 
<body> 

<form id="frm"> 
    <div> 
     <input type="submit" name="g" value="Submit" id="g" /> 
     <input type="button" id="addCap" value="Add a Cap"> 
    </div> 
    <fieldset id="cap1"> 
     <legend>Cap1</legend> 
     <input type="text" value="name cap1"/> 
     <input type="button" class="addParag" value="Add a Paragraph"> 
    </fieldset> 

</form> 
</body> 
</html>

來源

2011-07-06 13:06:43

向動態jQuery表單添加元素

回答

相關問題