Flask Jinja2模板表格中每行用户单选按钮独立选择问题求助

我来帮你搞定这个问题！你现在遇到的核心问题是单选按钮的分组逻辑出错了，完全不用JavaScript/jQuery/Ajax，靠Flask Jinja2模板就能解决。

问题根源 #

你当前的代码里，所有行的「Approve」单选按钮都用了name='approve'，「Reject」都用了name='reject'——这会让浏览器把所有这些单选按钮当成全局同一组，导致选了某一行的Approve，其他行的Approve都会被取消选中，根本没法独立控制每行的选择。另外，下拉框的name='Privileges'也是全局重复的，提交后只能拿到最后一行的权限选择值，这也是个隐藏问题。

解决方案：给每行表单元素加唯一标识 #

我们只需要给每行的表单元素（单选按钮、下拉框）的name属性加上唯一后缀（比如用每行的员工ID item[0]），让每行的表单元素独立区分开。

修改后的完整代码如下：

<form class="form-horizontal" action="/check_approve" method="post" id="admin_approve">
  <div class="table-responsive">
    <table class="table table-bordered table-striped table-highlight">
      <thead>
        <tr>
          <th>UserName</th>
          <th>Privileges</th>
          <th>Approve</th>
          <th>Reject</th>
        </tr>
      </thead>
      <tbody>
        {% for item in data %}
        <tr>
          <td>{{item[0]}}<input type="hidden" name="empid_list" value="{{item[0]}}"></td>
          <td>
            <select name="privileges_{{item[0]}}" form="admin_approve">
              <option value="empty"></option>
              <option value="HR">HR</option>
              <option value="Compensation Analyst">Compensation Analyst</option>
              <option value="HR Manager">HR Manager</option>
            </select>
          </td>
          <td>
            <div class='radio'>
              <label><input type='radio' name='decision_{{item[0]}}' value="approve" checked></label>
            </div>
          </td>
          <td>
            <div class='radio'>
              <label><input type='radio' name='decision_{{item[0]}}' value="reject"></label>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="wrapper">
    <button type="submit" form ="admin_approve" class="btn btn-primary">Submit</button>
  </div>
</form>

关键修改说明 #

1. 单选按钮独立分组：把每行的Approve和Reject单选按钮的name改成decision_{{item[0]}}，这样每行的两个单选按钮属于同一组（只能二选一），且不同行的分组完全独立，不会互相干扰。
2. 下拉框独立命名：下拉框的name改为privileges_{{item[0]}}，确保每行的权限选择都能被后台正确接收，不会被其他行的选择覆盖。
3. 员工ID列表：把原来单个的empid隐藏域改成empid_list数组，方便后台获取所有需要处理的员工ID，批量遍历处理数据。

Flask后台接收数据示例 #

在你的/check_approve路由里，可以这样处理提交的数据：

@app.route('/check_approve', methods=['POST'])
def check_approve():
    # 获取所有需要处理的员工ID列表
    emp_ids = request.form.getlist('empid_list')
    for emp_id in emp_ids:
        # 获取该行的审批决策（approve/reject）
        decision = request.form.get(f'decision_{emp_id}')
        # 获取该行的权限选择
        privilege = request.form.get(f'privileges_{emp_id}')
        # 这里执行你的数据库操作，比如更新员工权限、记录审批状态等
        print(f"员工 {emp_id}: 审批结果 {decision}, 权限设置 {privilege}")
    return "审批处理完成"

这样就能完美实现每行独立选择审批状态和权限啦！

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