Как я могу передать значение переменной из одного div в другой div в том же шаблоне?

Question

Я использую цикл для извлечения данных из объекта модели. Я пытаюсь передать одну и ту же переменную i среди двух разных div. Я хочу тот же i, какой мне нужен, чтобы получить тот же объект. Я новичок в этой области и, возможно, я делаю что-то глупое.

Любая помощь будет принята с благодарностью.

Вот фрагмент

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-dark">
            <thead>
               <tr>
                  <th scope="col">S.N</th>
                  <th scope="col">Company Name</th>
                  <th scope="col">Trade Ref Date</th>

               </tr>
            </thead>
              <tbody>
          {% for i in records %}
              <tr>
              <!--I'm getting objects variable value in here-->
                  <th scope="row">1</th>
                  <td>{{i.company}}</td>
                  <td>{{i.address}}</td>
                  <td>{{i.contact}}</td>


                  </td>
               </tr>
            {% endfor %}
              </tbody>
         </table>
         <div class="modal fade" id="data1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
                  <div class="modal-header">
                     <h3 class="modal-title title" id="exampleModalLabel">Trade Details</h3>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                     </button>
                  </div>
                  <div class="modal-body">
                     <div class="card-body card-block">
                        <div class="displaydata">
                           <div class="description">
                              <ul>
                              <!--I'm not able to get objects variable value in here-->
                                 <li>{{i.sn}}</li>
                                 <li>{{i.company}}</li>
                                 <li>{{i.address}}</li>
                                 <li>{{i.contact}}</li>
                              </ul>
                           </div>
                           <table class="table table-bordered">
                              <tbody>
                                 <tr>
                                    <th scope="col">Sales </th>
                                    <th scope="row">Purchase</th>
                                 </tr>
                                 <tr>
                                    <th scope="col"><span>Sale/Cancel Sales : </span>{{i.sales}}<span></span></th>

                                 </tr>

                                       </tbody>
                           </table>

Answer 1

Ваш код неверен, эта часть кода будет повторяться столько же, сколько и количество записей, поэтому у вас будет много значений i

{% for i in records %}
              <tr>
              <!--I'm getting objects variable value in here-->
                  <th scope="row">1</th>
                  <td>{{i.company}}</td>
                  <td>{{i.address}}</td>
                  <td>{{i.contact}}</td>
                  </td>
               </tr>
            {% endfor %}

но какое значение i вы хотите вставить ниже, пока у вас их много - ^)

<li>{{i.sn}}</li>
<li>{{i.company}}</li>
<li>{{i.address}}</li>
<li>{{i.contact}}</li>

Answer 2

Вы не можете получить доступ к внутренним переменным области вне цикла, я понимаю, что вы хотите показать описание и некоторые данные о продажах по выбранным данным из ваших записей. если это так, вы можете использовать событие клика. и получите конкретную информацию в переданной функции и покажите эти данные в ваших соответствующих местах. как

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-dark">
            <thead>
               <tr>
                  <th scope="col">S.N</th>
                  <th scope="col">Company Name</th>
                  <th scope="col">Trade Ref Date</th>

               </tr>
            </thead>
              <tbody>
          {% for i in records %}
              <tr onclick="somefunction(i)">
              <!--I'm getting objects variable value in here-->
                  <th scope="row">1</th>
                  <td>{{i.company}}</td>
                  <td>{{i.address}}</td>
                  <td>{{i.contact}}</td>


                  </td>
               </tr>
            {% endfor %}
              </tbody>
         </table>

Теперь напишите функцию для clickkevent

<script>
function somefunction(data){
  document.getElementById("sn").innerHTML = data.sn;
  document.getElementById("company").innerHTML = data.company;
  document.getElementById("addr").innerHTML = data.addr;
  document.getElementById("contact").innerHTML = data.contact;
  document.getElementById("sales").innerHTML = data.sales;
}
</script>

Теперь приведенный ниже div будет содержать выбранную вами запись, когда вы нажимаете / выбираете запись

<div class="modal fade" id="data1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
                  <div class="modal-header">
                     <h3 class="modal-title title" id="exampleModalLabel">Trade Details</h3>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                     </button>
                  </div>
                  <div class="modal-body">
                     <div class="card-body card-block">
                        <div class="displaydata">
                           <div class="description">
                              <ul>
                              <!--I'm not able to get objects variable value in here-->
                                 <li id="sn">#</li>
                                 <li id="company"></li>
                                 <li id="addr"></li>
                                 <li id="contact"></li>
                              </ul>
                           </div>
                           <table class="table table-bordered">
                              <tbody>
                                 <tr>
                                    <th scope="col">Sales </th>
                                    <th scope="row">Purchase</th>
                                 </tr>
                                 <tr>
                                    <th scope="col"><span>Sale/Cancel Sales : </span><span id="sales"></span></th>

                                 </tr>

                                       </tbody>
                           </table>