如何获取HTML类属性？Django表单绑定表格行元素问题求助

我明白你现在的困境：用table布局做可编辑表单时，没法把表单直接塞到行里，用HTML5独立表单又遇到了id重复、输入框name属性不对的问题。别担心，我给你梳理下解决方案，一步步来：

核心问题分析 #

• 表单id重复：你之前用{{form.name.name}}当表单id，如果有相同name的数据源，id就会重复，导致多个输入框绑定到同一个表单，提交时混乱。
• 输入框name属性缺失：手动写的<input>没有对应Django表单字段的name属性，后端接收数据时没法和模型字段对应上。
• 表单与控件绑定不严谨：需要确保每个行的输入框和按钮都精准绑定到对应的独立表单。

解决方案代码修改 #

修改后的HTML代码 #

<h3>{{ error }}</h3>
<table>
    <!-- 先渲染所有独立表单（放在表格外不影响布局，只要存在即可） -->
    {% for form in forms %}
        <form method="POST" id="form-{{ form.instance.id }}">{% csrf_token %}
            <!-- 隐藏主键字段，方便后端识别要编辑的实例 -->
            {{ form.id }}
        </form>
    {% endfor %}
    <!-- 新增数据的表单 -->
    <form method="POST" id="new-form">{% csrf_token %}</form>

    <!-- 表格内容 -->
    {% for form in forms %}
    <tr>
        <td>{{ form.name form="form-{{ form.instance.id }}" class="form-control" }}</td>
        <td>{{ form.token form="form-{{ form.instance.id }}" class="form-control" }}</td>
        <td>
            <button class="btn btn-lg btn-success w-100" form="form-{{ form.instance.id }}">Save</button>
        </td>
    </tr>
    {% endfor %}
    <tr>
        <td>{{ new_form.name form="new-form" class="form-control" placeholder="Name" }}</td>
        <td>{{ new_form.token form="new-form" class="form-control" placeholder="API-token" }}</td>
        <td>
            <button class="btn btn-lg btn-success w-100" form="new-form">Add</button>
        </td>
    </tr>
</table>

关键修改点说明 #

1. 唯一表单id：用form.instance.id作为表单id的一部分（form-{{ form.instance.id }}），每个数据库实例的id都是唯一的，彻底解决表单id重复问题。
2. 使用Django表单字段渲染：不再手动写<input>，而是用{{ form.name }}、{{ form.token }}，Django会自动生成带有正确name属性的输入框，后端提交时能直接识别对应字段。
3. 精准绑定表单与控件：给每个表单字段和按钮加上form="xxx"属性，把它们和对应的独立表单关联起来，这样即使不在表单标签内部，点击按钮也会提交指定的表单。
4. 新增表单复用Django表单：把新增数据的输入框也换成new_form的字段，保持和编辑表单一致的规范，避免手动写input的问题。

后端处理提示（可选） #

在settings视图里，你可以通过判断请求中是否包含表单主键来区分编辑/新增操作：

def settings(request):
    error = ""
    if request.method == "POST":
        # 处理编辑表单
        for ts_instance in TrafficSources.objects.all():
            form = TrafficSourcesForm(request.POST, instance=ts_instance)
            if form.is_valid():
                form.save()
                return redirect('settings')
        # 处理新增表单
        new_form = TrafficSourcesForm(request.POST)
        if new_form.is_valid():
            new_form.save()
            return redirect('settings')
        error = "提交数据有误，请检查"
    
    new_form = TrafficSourcesForm()
    forms = [TrafficSourcesForm(instance=x) for x in TrafficSources.objects.all()]
    return render(request, 'mainpage/dashboard.html', {'new_form': new_form, 'forms': forms, 'error': error})

这样就能完美实现你的可编辑表格需求啦！

内容的提问来源于stack exchange，提问作者mrdeath4