将表中的行ID传递给flask中的模态（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>

你应该没问题。