Добавление элементов в динамическую форму jQuery - PullRequest
Новая
       1

Добавление элементов в динамическую форму jQuery

2 голосов
/ 06 июля 2011

Мне нужно создать динамическую форму. Структура является: Каждая шапка. может иметь много Абзаца, а форма может иметь много Cap.

Вот пример: http://jsfiddle.net/michelejs/UX5bz/

Я бы сказал, что если я добавлю абзац, он будет добавлен в правильный набор полей. Как я могу это сделать?

Ответы [ 2 ]

2 голосов
/ 06 июля 2011

Вы можете использовать что-то вроде этого: http://jsfiddle.net/UX5bz/7/

Который использует .parent(), чтобы найти, куда добавить: 

$(elem).parent().append(htmlcode);
0 голосов
/ 06 июля 2011

Вот рабочая версия вашего кода. 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...