在django表单集中动态添加行

在Django表单集中动态添加行是指在表单中动态地增加或删除多个表单字段的功能。这在需要用户输入多个相关数据时非常有用，比如添加多个联系人、多个地址等。

实现动态添加行的常用方法是使用JavaScript来动态地操作表单字段。以下是一个实现动态添加行的示例：

首先，在Django的表单类中定义一个初始的表单字段，比如联系人的姓名和电话号码：

from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(label='姓名')
    phone = forms.CharField(label='电话号码')

在HTML模板中，使用JavaScript来实现动态添加行的功能。可以使用jQuery库来简化操作。以下是一个示例：

<form id="contact-form">
    <div id="formset">
        <div class="form-row">
            <div class="form-field">
                <label for="id_name">姓名</label>
                <input type="text" name="name" id="id_name">
            </div>
            <div class="form-field">
                <label for="id_phone">电话号码</label>
                <input type="text" name="phone" id="id_phone">
            </div>
        </div>
    </div>
    <button type="button" id="add-row">添加联系人</button>
    <button type="submit">提交</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 添加联系人行
    $('#add-row').click(function() {
        var formCount = $('#formset .form-row').length;
        var newForm = $('#formset .form-row:last').clone();

        // 更新新行的字段名称和ID
        newForm.find('input').each(function() {
            var name = $(this).attr('name').replace('-' + (formCount-1) + '-', '-' + formCount + '-');
            var id = 'id_' + name;
            $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
        });

        // 插入新行
        $('#formset').append(newForm);
    });
});
</script>

在上述示例中，点击"添加联系人"按钮会复制最后一个联系人行，并将其插入到表单中。新行的字段名称和ID会根据当前行的数量进行更新。

这样，用户就可以通过点击按钮动态地添加多个联系人行。

动态添加行在以下场景中非常有用：