テーブルの行IDをフラスコのモーダルに渡す（Python）

Question

データベーステーブルのデータを表示するHTMLテーブルがあります。データはループを使用して表示されます。各行には、ループ。ボタンを使って行内のデータを編集しています。ボタンをクリックすると、編集するデータがモーダルにポップアップ表示されます。問題は、行の最初のIDのみを選択する（つまり、行1を選択する）ということです。 2行目のボタンをクリックしても、モーダルのフィールドに表示される情報は、行one.Nをどのように私はこれについてoガイドには何ですか？これをどうすれば解決できますか？私はあなたが各ユーザーの行のためのモーダルフォームを作成して見るように

<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を意味するので、私にとっては少し高価なようです。私の意見では、1つのモーダルのみを定義し、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> 

、あなたは問題ないはずです。