如何使用jquery添加n个表单

Question

Here我发现以下有用的javascript动态添加表单到我的python / django模板。这是代码：

function updateElementIndex(el, prefix, ndx) {
    var id_regex = new RegExp('(' + prefix + '-\\d+)');
    var replacement = prefix + '-' + ndx;
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);
}

function addForm(btn, prefix) {
    // Make a variable and assign to it a string convertd to an integer. The string is the variable
    // with the the #id assigned to it. The value of this attribute is saved. The value will equal 
    // the current number of forms 
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    // Find the element with the given class, and clone it after loading the 0 index get request.
    // Var row is now a cloned row.
    var row = $('.dynamic-form:first').clone(true).get(0);
    $(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
    $(row).children().not(':last').children().each(function() {
        updateElementIndex(this, prefix, formCount);
        $(this).val('');
    });
    $(row).find('.delete-row').click(function() {
        deleteForm(this, prefix);
    });
    $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
    return false;
}

function deleteForm(btn, prefix) {
    $(btn).parents('.dynamic-form').remove();
    var forms = $('.dynamic-form');
    $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
    for (var i=0, formCount=forms.length; i<formCount; i++) {
        $(forms.get(i)).children().not(':last').children().each(function() {
            updateElementIndex(this, prefix, i);
        });
    }
    return false;
}

然后我有以下模板。

{% extends "base.html" %}
{% load crispy_forms_tags %}
{% crispy form form.helper %}

{% load staticfiles %}


{% block extrahead %}


{% endblock %}

{% block blurb %}
<h1>Upload Samples</h1>
<p>Upload A Single Sample, Or A Batch Of Samples</p>
{% endblock %}




{% block form %} 

<style>
    tr th {text-align:center;}
</style>

<!-- Display formset -->
<form id="myForm" method="post" action="">
  {{ formset.management_form }}
  <div class='table'>
    <table class='no_error' id='id_forms_table' border="2px" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for form in formset %}
        <tr id="{{ form.prefix }}-row" class="dynamic-form">
           <td></td>
           <
           <td {% if forloop.first %} class="hidden"{% endif %}>
             <a id="remove-{{ form.prefix }}-row" href="javascript:void(0)" class="delete-row"><input type='button' value='Remove Row' class='delete-row'></a>
           </td>
        </tr>
        {% endfor %}
      </tbody>
</table>
</div>
</form>

<!-- Dynamic Formset javascript -->
<script type="text/javascript">
     $(function () {
        $('.add-row').click(function() {
          return addForm(this, 'form');
        });
        $('.delete-row').click(function() {
          return deleteForm(this, 'form');
        })
        $('.add-10-rows').click(function() {
          return addForm(this, 'form');
        })
    })
    </script>

<input type='button' value='Add Row' class='add-row'>
<input type='button' value='Add 10 Rows' class='add-10-rows'>

<div style='padding-top:20px'> 
  <input class='btn btn-primary' type='submit' value='Upload' />
</div>



{% endblock %}

这很好用，但现在我想调整它以允许添加n行。我将制作一个接收一个整数的表单，然后当按下一个按钮时，我想添加一定数量的表单而不是一次一个。我对javascript / jquery很新，但我认为psudo代码看起来像这样：

function addNForms(btn, prefix, n){
    for(var i = 0; i < n; i++){
        // Perform the same logic as addForm.   
    }
}

不幸的是我无法弄明白。我在for循环中执行了n次函数逻辑，但结果是一次只生成一个表单。 addForm函数的哪一部分可以放入for循环来实现这个目标？