Question

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

这是我的代码：

＆＃13;

<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>

＆＃13;

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>

你应该没事。

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

1 个答案: