Javascript 如何使用jquery添加n个表单

我发现下面的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;
}

函数updateElementIndex（el，前缀，ndx）{
var id_regex=new RegExp（'（'+前缀+'-\\d+）；
var替换=前缀+'-'+ndx；
如果（$（el）.attr（“for”））$（el）.attr（“for”，$（el）.attr（“for”）.replace（id_regex，replacement））；
如果（el.id）el.id=el.id.replace（id_regex，替换）；
如果（el.name）el.name=el.name.replace（id_regex，replacement）；
}
函数addForm（btn，前缀）{
//创建一个变量并为其分配一个转换为整数的字符串。该字符串就是变量
//将#id分配给它。保存此属性的值。该值将等于
//表格的当前数目
var formCount=parseInt（$（“#id"+前缀+”-TOTAL_FORMS'）.val（））；
//找到具有给定类的元素，并在加载0 index get请求后克隆它。
//Var行现在是一个克隆行。
var row=$（'.dynamic form:first'）.clone（true.get（0）；
$（行）.removeAttr（'id'）.insertAfter（$（'.dynamic form:last'））.children（'.hidden'）.removeClass（'hidden'）；
$（行）.children（）.not（'：last'）.children（）.each（函数（））{
updateElementIndex（this、前缀、formCount）；
$（this.val（“”）；
});
$（行）。查找（'.delete row'）。单击（function（）{
deleteForm（这个，前缀）；
});
$（'#id'+前缀+'-表格总数'）.val（表格计数+1）；
返回false；
}
函数deleteForm（btn，前缀）{
$（btn）.parents（'.dynamic form'）.remove（）；
变量形式=$（'.dynamic form'）；
$（'#id'+prefix+'-TOTAL#u FORMS'）.val（FORMS.length）；
对于（var i=0，formCount=forms.length；i
这里缺少代码、链接HTML和一些函数，如
updateElementIndex
和
deleteForm
。我们需要了解整个情况以便提供帮助。是的，我只是不想用代码主宰这篇文章，但我会包含更多的内容。指向此javascript和jquery的链接都在extrahead块中。它们似乎r可以很好地工作，因为我可以一次添加一个表单，没有问题（正如原始脚本的目的）。
{% 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 %}

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