HTML表格循环值异常：管理员删除按钮无法获取对应用户值

当前开发的管理员删除账号功能存在异常：页面中所有删除按钮点击后，都会获取页面第一个账号的值，而非对应行的账号值，导致flash提示始终显示第一个用户名，而非目标删除用户。

原前端代码 #

<form action="/admin" method="post">
<table class="table">
    <thead class="table-dark">
        <tr>
            <th>Users</th>
        </tr>
    </thead>
    {% for user in users %}
    <tr style="background-color:burlywood"> 
        <td><input type="hidden" name="user" value="{{user.username}}">{{user.username}}</td>
        <td><input type="submit" for="user" value="Delete"></td>
    {% endfor %}  
    </tr>   
       
</table>

原后端Flask代码 #

@app.route("/admin", methods=["GET", "POST"])
@login_required
def admin():
"""Manage account"""
if request.method == "GET":
    user_id = session["user_id"] 
    admin = db.execute("SELECT id FROM users WHERE id = (?)", 
user_id)

    for row in admin:
        if int(row["id"]) == 17:
            users = db.execute("SELECT username FROM users")
            return render_template("admin.html", users = users)

        else:    
            return apology("Only Admin can access this page!")
    return apology("valid return")

else:
    username = request.form.get("user")
    flash(f"{username} has been deleted!")
    return redirect("/")

问题原因 #

1. 所有用户行共享同一个外层<form>，循环生成的hidden字段都使用name="user"，提交表单时浏览器会发送所有同名字段，但后端request.form.get("user")只会读取第一个值。
2. HTML结构错误：<tr>标签在{% endfor %}之后才闭合，导致DOM结构异常，进一步影响表单提交逻辑。
3. submit按钮的for属性无效，该属性仅用于<label>关联表单控件。

修复方案 #

前端修复（核心） #

为每个用户行单独创建独立表单，确保删除按钮仅提交对应用户的信息，同时修正DOM结构：

<table class="table">
    <thead class="table-dark">
        <tr>
            <th>Users</th>
        </tr>
    </thead>
    {% for user in users %}
    <tr style="background-color:burlywood"> 
        <td>{{user.username}}</td>
        <td>
            <form action="/admin" method="post">
                <input type="hidden" name="user" value="{{user.username}}">
                <input type="submit" value="Delete">
            </form>
        </td>
    </tr>
    {% endfor %}  
</table>

后端代码优化（建议） #

简化权限校验逻辑，增加参数校验，补充实际删除操作的提示：

@app.route("/admin", methods=["GET", "POST"])
@login_required
def admin():
    """Manage account"""
    user_id = session.get("user_id")
    if not user_id:
        return apology("请先登录！")
    
    admin = db.execute("SELECT id FROM users WHERE id = ?", (user_id,))
    if not admin or int(admin[0]["id"]) != 17:
        return apology("只有管理员才能访问此页面！")

    if request.method == "GET":
        users = db.execute("SELECT username FROM users")
        return render_template("admin.html", users=users)
    else:
        username = request.form.get("user")
        if not username:
            return apology("未选择要删除的用户！")
        # 补充实际删除用户的数据库操作
        # db.execute("DELETE FROM users WHERE username = ?", (username,))
        flash(f"{username} 已被删除！")
        return redirect("/")

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