Question

我必须创建一个动态表单。结构是：每个上限。可以有很多段落，而且表格可以有很多章。

这里有一个例子：http://jsfiddle.net/michelejs/UX5bz/

我想如果我添加一个段落，它将被添加到正确的字段集中。我怎么能这样做？

Answer 1

使用.parent()找到要追加的位置：

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

Answer 2

以下是您的代码的工作版本。

<!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>

向动态jQuery表单添加元素

2 个答案: