将表中的行 ID 传递给烧瓶中的模式（python）

Question

我有一个 HTML 表，它显示数据库表中的一些数据。数据通过循环显示。每一行都有一个按钮，该按钮也是通过循环生成的。我正在使用按钮连续编辑数据。单击按钮时，会弹出一个模式，其中包含要编辑的数据。问题是它只选择行中的第一个 ID（即它只选择第一行）。即使我单击第二行按钮，模式中字段中显示的信息也是第一行的。请任何关于我将如何处理的指南？我怎样才能解决这个问题 ？注意：我正在使用烧瓶

这是我的代码：

<div>
   <table class="table" id="users">
         <thead>
            <tr class="success">
               <th>#</th>
               <th>Staff ID</th>
               <th>Role</th>
               <th>Designation</th>
               <th>Phone</th>
               <th>Email</th>
               <th>Department</th>
               <th>Edit</th>


            </tr>
         </thead>
         
         <tbody>
            {% for user in users %}
               <tr>
                  <td>{{ user.id }}</td>
                  <td>{{ user.staffid }}</td>
                  <td>{{ user.role }}</td>
                  <td>{{ user.designation }}</td>
                  <td>{{ user.phone }}</td>
                  <td> {{ user.email }} </td>
                  <td> {{ user.dept }} </td>
                  <td><a href="#" data-toggle="modal" data-target='#edit' class="btn btn-success"><i class="fa fa-edit"></i> EDIT </a></td>
                  
               </tr>
               <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title"> <i class="fa fa-edit"></i> Edit User Information </h4>
                                </div>
                                <div class="modal-body">
                                    <form  method="post" action="/edit_profile">
                                       <div class="form-group">
                                        <input type="text" class="form-control" value="{{ user.staffid }}" name="staffid" required>
                                       </div>
                                       <div class="form-group">
                                        <input type="text" class="form-control" value="{{ user.role }}"  name="role" required>
                                       </div>
                                       <div class="form-group">
                                        <input type="text" class="form-control" value="{{ user.designation }}"  name="designation" required>
                                       </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default btn-danger" data-dismiss="modal"><i class="fa fa-remove" aria-hidden="true"></i>Cancel</button>
                                        <button type="submit" name="action" class="btn btn-primary" style="width:100px"><i class="fa fa-check"></i> Submit</button>
                                    </div>
                                </form>
     
                     </div>
                  </div>
         </div>
  </div>
 <script> $('#edit').modal(show); </script>
            {% endfor %}
         </tbody>
      </table>  
<script type="text/javascript">
  $(document).ready( function () {
    $('#users').DataTable();
} );
  </script>          
             
<div> 

Answer 1

正如我所见，您为每个用户行创建了一个模式表单。这对我来说似乎有点贵，因为当你有很多行时，这意味着很多 html。我认为更好的方法是只定义一个模式并通过 Ajax 动态插入内容。

但是，您的方法不起作用的原因是您为每个模式使用了相同的 id。将模式的第一行更改为

<div class="modal fade" id="edit{{ user.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

以及相应的编辑按钮行：

<td><a href="#" data-toggle="modal" data-target='#edit{{ user.id }}' class="btn btn-success"><i class="fa fa-edit"></i> EDIT </a></td>

你应该没事的。

Answer 2

哦，伙计，我遇到了完全相同的问题，而且我的模态仅指第一个元素。我已经连续 3 天试图找到这个问题的解决方案，最后在打开了数百个标签后，幸运地出现了 5 年前只有 1 个答案的帖子，我的问题得到了解决。我专门创建了 SO 帐户只是为了感谢您。我会在这里待更长时间。我流下了幸福的泪水，终于可以关闭这些标签并得到适当的休息。谢谢！！！

我正在粘贴我的代码，以防有人想从中取出一些东西，现在它可以工作了（我列出了抽认卡集，每个集都带有编辑按钮来更改其名称，它由两个端点处理 -一个用于列出上述集合，一个用于更改其名称）

sets.html：

{% for set in sets %}
  

<div class="setlist">
        <div style="display: flex">
            <div><a href="/flashcards/{{set.id}}">{{set.name}}</a></div>
            <div style="position:absolute; right:300px">Created on {{set.date_created.strftime('%d-%m-%Y')}}</div>
            <div style="position:absolute; right:250px">
              <div class="dropdown">
                <a href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="fa-solid fa-pen"></i>
                </a>
              
                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                  <button type="button" class="dropdown-item" data-toggle="modal" data-target="#edit{{set.id}}" data-id="{{set.id}}">Change name</button>
                  <a class="dropdown-item" href="/delete-set/{{set.id}}">Delete</a>
                </div>
              </div>
            </div>
        </div>
        <div style="height: 1px; width:100%; margin-top: 10px; background-color:#B6A2A2"></div>
      </div>
    
    
        <!-- Update modal -->
      <div class="modal fade" id="edit{{set.id}}" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            
            <div class="modal-header">
              <h5 class="modal-title" style="font-family: Play;" id="updateModalLabel">Change set name</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form method="POST" action="/change-set-name/{{set.id}}">
              <div class="modal-body">
                      <div style="display: flex; justify-content: space-evenly;">
                          <input type="text" class="inmodalinput" name="updatesetname" id="updatesetname" placeholder="{{set.name}}">
                      </div>
              </div>
    
            <div style="text-align: center">
               <button type="submit" class="add_new_button">Save new name</button> 
            </div>
            </form>
          </div>
        </div>
      </div>
    
{% endfor %}

views.py：

@views.route("/sets", methods=['GET', 'POST'])
@login_required
def sets():
    user = User.query.filter_by(id=current_user.id).first()
    fc_sets = user.sets

    if request.method == 'POST':
        set_name = request.form.get('setname')

        if not set_name:
            flash("Can't be empty", category="error")
        else:
            new_set = Set(name=set_name, user=current_user)
            db.session.add(new_set)
            db.session.commit()
            flash("Set added!", category="success")
            return redirect(url_for("views.sets"))

    return render_template("sets.html", fc_sets=fc_sets)


@views.route("/change-set-name/<id>", methods=['GET', 'POST'])
@login_required
def change_set_name(id):
    fc_set = Set.query.filter_by(id=id).first()
    

    if not fc_set:
        flash("No set found", category='error')
    else:
        fc_set.name = request.form.get('updatesetname')
        db.session.commit()
        flash("Set name updated", category='success')
    
    
    return redirect(url_for("views.sets"))