如何使用模态显示特定的输出数据

Question

我目前坚持使用模态显示特定的输出，我认为这可能涉及某种形式的jquery。但是需要一些指针，我会很感激。

此图片显示了可点击的资产，该资产应显示与该资产有关的数据。

但是，当我单击每个模板时，我现在使用的模板将所有资产的数据显示为一个。

如何使资产成为可点击模式的模板：

<tbody>
   {% for item in my_stock %}  
   <tr class="d-none d-sm-table-row">     
  <td colspan="2"> <a data-toggle="modal"  href="#mydata"> {{item.symbol}}</a> 
  </td>
  </tr>
  {% endfor %}

我的模态模板：

<div class="modal fade" id="mydata" tabindex="-1" role="dialog" aria-labelledby="mydata" aria-hidden="true">
<tr class = " d-none d-sm-table-row">
   <th colspan="2">ASSET</th>
   <th class="text-right"> Quantity </th>
   <th class="text-right"> Buy Price </th>
   <th class="text-right"> Investment </th>
   <th class="text-right"> Date </th>
 </tr>  
 <tbody>
   {% for item in my_stock %}  
     <tr class="d-none d-sm-table-row">
      <td colspan="2">  {{item.symbol}} </td>
      <td class="text-right"> {{item.quantity}}</td>
       <td class="text-right"> {{item.buy_price}}</td>
       <td class="text-right"> {{item.total_value}}</td>
       <td class="text-right"> {{item.event_date}}</td>
        </tr>
 {% endfor %}

Answer 1

为每个模型制作一个模态怎么样？

<tbody>
  {% for item in my_stock %}  
  <tr class="d-none d-sm-table-row">     
    <td colspan="2"> <a data-toggle="modal"  href="#mydata_{{forloop.counter}}"> {{item.symbol}}</a> 
    </td>
  </tr>
  {% endfor %}
</tbody>

模态：

{% for item in my_stock %}  
<div class="modal fade" id="mydata_{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="mydata_{{forloop.counter}}" aria-hidden="true">
  <tr class = " d-none d-sm-table-row">
   <th colspan="2">ASSET</th>
   <th class="text-right"> Quantity </th>
   <th class="text-right"> Buy Price </th>
   <th class="text-right"> Investment </th>
   <th class="text-right"> Date </th>
 </tr>  
 <tbody>

     <tr class="d-none d-sm-table-row">
      <td colspan="2">  {{item.symbol}} </td>
      <td class="text-right"> {{item.quantity}}</td>
       <td class="text-right"> {{item.buy_price}}</td>
       <td class="text-right"> {{item.total_value}}</td>
       <td class="text-right"> {{item.event_date}}</td>
      </tr>
  </tbody>
</div>
{% endfor %}