플라스크 (파이썬)의 모달에 테이블의 행 ID 전달

Question

데이터베이스 테이블의 일부 데이터를 표시하는 HTML 테이블이 있습니다. 루프를 사용하여 데이터가 표시됩니다. 각 행에는 루프. 버튼을 사용하여 연속적으로 데이터를 편집하고 있습니다. 버튼을 클릭하면 모달이 편집 할 데이터로 팝업됩니다. 문제는 행에서 첫 번째 ID 만 선택한다는 것입니다 (즉, 행 하나만 선택). 행 2 버튼을 클릭해도 모달 필드에 표시된 정보는 행 one.N에 대해 어떻게 안내할까요? 이 문제를 어떻게 해결할 수 있습니까? 참고 : 당신이 각 사용자 행에 대한 모달 폼을 만들시피

<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를 사용하기 때문입니다.

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

을 당신은 괜찮을 것 : 따라

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

하고 편집 버튼의 라인에 모달의 첫 줄을 변경합니다.