ブートストラップ - テーブル内のモーダル内のテーブル

Question

私はブートストラップでDjangoを使用しており、モーダルウィンドウに問題があります。私はテーブルを持っており、その中にセルがモーダルウィンドウへのリンクである1つのカラムがあります。モーダルウィンドウには、選択したセルに関連する別のテーブルが表示されます。

問題は、forループの内部にモーダルdivを保持しようとしていることです。これは、どのようにしてテーブルのどの行がクリックされたかを判断するためです。私はモーダルについて少し読んだことがあり、モーダルdivがテーブルタグ内にあるときに他の人が問題を抱えているのを見たので、私の問題がどこから来ているのだろうと思います。

現時点では、メインテーブルが正しく表示され、意図したとおりにセルをクリックするとモーダルウィンドウが開きます。 forループからの情報を適切に受け取ります。

しかし、モーダル・ディビジョン内にテーブルを置くと、モーダル・ウィンドウに表示されず、メイン・テーブルの下にモーダルがアクティブ化されているかどうかが表示されます。モーダルウィンドウは、ヘッダとフッタだけが空のボディで表示されます。私がモーダル内のテーブルを取り除き、代わりにpのようなものを使用すると、それは動作しますが、テーブルを使うことを好むでしょう。

モーダルの部分を外側に移動すると、それはモーダルウィンドウのテーブルで動作しますが、問題はどこの行がクリックされたかを知るためです。

可能な場合はどの行が選択されたかに基づいて変数を渡すか、モーダルdivを保持する方法がある場合は、これを実行するより良い方法があるかどうかを誰にでも教えてください。まだモーダルウィンドウにテーブルを表示していますか？

HTMLは以下のとおりです。今後の参考のために

<table class="weekly table-hover main-manager-display" style="text-align: center; width: 100%"> 
    <thead> 
    </thead> 
    <tbody style="color: white"> 
     {% for week in team_selection %} 
      <tr> 
       {% for item in week|slice:":10" %} 
        <td>{{ item }}</td> 
       {% endfor %} 
       <td><a data-toggle="modal" href="#maxModal" style="color: white">{{ week.10 }}</a></td> 
       <td>{{ week.11 }}</td> 
      </tr> 
      <div class="modal fade" id="maxModal" role="dialog"> 
       <div class="modal-dialog"> 
        <div class="modal-content" style="background-color: #c4dfe6"> 
         <div class="modal-header"> 
          <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title" style="text-align: center; color: #1c4d66">Week {{ week.0 }} Best Possible Team</h4> 
         </div> 
         <div class="modal-body"> 
          <table class="table modal-table"> 
           <thead> 
            <tr> 
             <th>Position</th> 
             <th>Player</th> 
             <th>Points</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr> 
             <td>Test1</td> 
             <td>Test2</td> 
             <td>Test3</td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
         <div class="modal-footer"> 
          <button type="button" class="btn" data-dismiss="modal" style="background-color: #c4dfe6; color: #1c4d66">Close</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     {% endfor %} 
    </tbody> 
</table> 

Answer 1

、私はこれは<table>タグに代わるものとして、以下のコードを使用して動作するようになりました。

<style> 
.table { 
    display: table; 
} 
.row { 
    display: table-row; 
} 
.cell { 
    display: table-cell; 
} 
</style 

<div class="modal-body"> 
    <div class="table"> 
     <div class="row"> 
      <div class="cell"></div> 
     </div> 
    </div> 
</div>