jQuery克隆表单元素demo

jQuery克隆表单元素demo
HTML代码：

    <div id="attendees">
            <div id="att1" class="attendee">
                    <fieldset>
                        <legend><span class="legend">Attendee 1 Booking Details</span></legend>
                        <p name="test">
                        <label for="A_Title_1">Title: <span class="req">*</span></label>
                        <input name="A_Title_1" id="A_Title_1" value="" type="text" class="f_input" />
                        </p>

                        <p>
                        <label for="A_Forename_1">Forename: <span class="req">*</span></label>
                        <input name="A_Forename_1" id="A_Forename_1" type="text" class="f_input" />
                        </p>

                        <p>
                        <label for="A_Surname_1">Surname: <span class="req">*</span></label>
                        <input name="A_Surname_1" id="A_Surname_1" type="text" class="f_input" />
                        </p>

                        <p>
                        <label for="A_Info_1">Additional Info: </label>
                        <textarea name="A_Info_1" id="A_Info_1" cols="20" rows="10"></textarea>
                        <span class="info">Please include any infomation relating to dietary/ access/special requirements you might have.</span>
                        </p>
                    </fieldset>
                    </div>
<a href="#" class="add">Add more</a>

    </div>​

jquery代码：

$(function(){
    var template = $('#attendees .attendee:first').clone();
    var attendeesCount = 1;
    window.addAttendee = function(){
        attendeesCount++;
        var attendee = template.clone().find(':input').each(function(){
            var newId = this.id.substring(0, this.id.length-1) + attendeesCount;
            
            $(this).prev().attr('for', newId); // update label for
            this.name = this.id = newId; // update id and name (assume the same)
        }).end()
        .attr('id', 'att' + attendeesCount)
        .prependTo('#attendees');
    }
    $('.add').click(addAttendee);
});
​

参考： http://jsfiddle.net/VuT4g/1/

转载于:https://www.cnblogs.com/phpcode/archive/2012/05/14/2522772.html