J'ai un tableau de type Excel comme La version image, je devrai faire en temps réel calcul sur HTML en utilisant JS ou JQuery. L'exemple ci-dessous effectue le calcul en fonction d'une valeur unique, car vous pouvez voir les changements de mine et j'ai deux sélections déroulantes 10, une autre avec 16 sélections.

Les règles de calcul sont : Si l'utilisateur sélectionne Origine Europe et sélectionnez Volume 10, alors pour les 10 champs numériques correspondants, je devrai calculer le montant x Volume 10 valeur correspondante ci-dessous la table

Apple = Entrée utilisateur 3 et la valeur correspondante du tableau est 0, donc mon résultat sera 0.

Boysenberry = L'entrée utilisateur 233 et la valeur correspondante du tableau est 1 donc mon résultat sera 233.

Ainsi de suite, j'ai 10 tables pour la recherche de la valeur de calcul correspondante, elle change en fonction de la liste déroulante Origine et du Volume. Si j'en avais un c'était facile quand j'ai plus de table je traîne un peu je pense qu'il y a une bonne façon de faire le calcul. Merci d'avance pour votre aide.

jquery- calculer une valeur totale après avoir rempli une case à cocher/radio/formulaire déroulant

<div>
   <label class="description" for="element_2">Product Origin</label>
   <select class="element select medium" id="element_2" name="element_2">
      <option value="" selected="selected"></option>
      <option value="1" >Europe</option>
      <option value="2" >Asia</option>
      <option value="3" >China</option>
      <option value="3" >India</option>
      <option value="3" >USA</option>
      <option value="3" >Africa</option>
   </select>
</div>
<div>
   <label class="description" for="element_1">Volume</label>
   <select class="element select medium" id="element_1" name="element_1">
      <option value="" selected="selected"></option>
      <option value="10" >10</option>
      <option value="100" >100</option>
      <option value="1000" >1000</option>
      <option value="2000" >2000</option>
      <option value="3000" >3000</option>
      <option value="4000" >4000</option>
      <option value="5000" >5000</option>
      <option value="6000" >6000</option>
      <option value="6000" >6000</option>
      <option value="8000" >8000</option>
      <option value="9000" >9000</option>
      <option value="10000" >10000</option>
      <option value="20000" >20000</option>
      <option value="30000" >30000</option>
      <option value="40000" >40000</option>
      <option value="50000" >50000</option>
   </select>
</div>
<div>
   <label class="description" for="element_1">Apple </label>
   <input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<div>
   <label class="description" for="element_2">Apricot </label>
   <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<div>
   <label class="description" for="element_3">Banana </label>
   <input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<div>
   <label class="description" for="element_4">Bilberry </label>
   <input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<div>
   <label class="description" for="element_5">Blackberry </label>
   <input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<div>
   <label class="description" for="element_6">Blackcurrant </label>
   <input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<div>
   <label class="description" for="element_7">Blueberry </label>
   <input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<div>  
   <label class="description" for="element_8">Boysenberry </label>
   <input id="element_8" name="element_8" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<div>
   <label class="description" for="element_9">Cherry </label>
   <input id="element_9" name="element_9" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<div>
   <label class="description" for="element_10">Coconut </label>
   <input id="element_10" name="element_10" class="element text medium" type="text" maxlength="255" value=""/> 
</div>
<table class="table table-bordered table-hover table-condensed">
   <thead>
      <tr>
         <th title="Field #1"><strong>Category 1: Origin Europe</strong></th>
         <th title="Field #2"><strong>10</strong></th>
         <th title="Field #3"><strong>100</strong></th>
         <th title="Field #4"><strong>1000</strong></th>
         <th title="Field #5"><strong>2000</strong></th>
         <th title="Field #6"><strong>3000</strong></th>
         <th title="Field #7"><strong>4000</strong></th>
         <th title="Field #8"><strong>5000</strong></th>
         <th title="Field #9"><strong>6000</strong></th>
         <th title="Field #10"><strong>7000</strong></th>
         <th title="Field #11"><strong>8000</strong></th>
         <th title="Field #12"><strong>9000</strong></th>
         <th title="Field #13"><strong>1000</strong></th>
         <th title="Field #14"><strong>10000</strong></th>
         <th title="Field #15"><strong>20000</strong></th>
         <th title="Field #16"><strong>30000</strong></th>
         <th title="Field #17"><strong>40000</strong></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Apple</td>
         <td align="right">0.1</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">2</td>
         <td align="right">3</td>
         <td align="right">4</td>
         <td align="right">5</td>
         <td align="right">6</td>
         <td align="right">7</td>
         <td align="right">8</td>
         <td align="right">9</td>
         <td align="right">10</td>
         <td align="right">11</td>
         <td align="right">12</td>
         <td align="right">13</td>
         <td align="right">14</td>
      </tr>
      <tr>
         <td>Apricot</td>
         <td align="right">0</td>
         <td align="right">0</td>
         <td align="right">0</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">1.5</td>
         <td align="right">2</td>
         <td align="right">2.5</td>
         <td align="right">3</td>
         <td align="right">3.5</td>
         <td align="right">4</td>
         <td align="right">4.5</td>
         <td align="right">5</td>
         <td align="right">5.5</td>
         <td align="right">6</td>
         <td align="right">7</td>
      </tr>
      <tr>
         <td>Banana</td>
         <td align="right">0.1</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">2</td>
         <td align="right">4</td>
         <td align="right">5</td>
         <td align="right">6</td>
         <td align="right">7</td>
         <td align="right">8</td>
         <td align="right">9</td>
         <td align="right">10</td>
         <td align="right">12</td>
         <td align="right">14</td>
         <td align="right">16</td>
         <td align="right">18</td>
         <td align="right">20</td>
      </tr>
      <tr>
         <td>Bilberry</td>
         <td align="right">1</td>
         <td align="right">5</td>
         <td align="right">10</td>
         <td align="right">10</td>
         <td align="right">15</td>
         <td align="right">20</td>
         <td align="right">25</td>
         <td align="right">30</td>
         <td align="right">35</td>
         <td align="right">40</td>
         <td align="right">45</td>
         <td align="right">50</td>
         <td align="right">55</td>
         <td align="right">60</td>
         <td align="right">65</td>
         <td align="right">70</td>
      </tr>
      <tr>
         <td>Blackberry</td>
         <td align="right">0.1</td>
         <td align="right">5</td>
         <td align="right">10</td>
         <td align="right">20</td>
         <td align="right">50</td>
         <td align="right">75</td>
         <td align="right">100</td>
         <td align="right">125</td>
         <td align="right">150</td>
         <td align="right">175</td>
         <td align="right">200</td>
         <td align="right">225</td>
         <td align="right">250</td>
         <td align="right">275</td>
         <td align="right">300</td>
         <td align="right">350</td>
      </tr>
      <tr>
         <td>Blackcurrant</td>
         <td align="right">0.1</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">2</td>
         <td align="right">2</td>
         <td align="right">4</td>
         <td align="right">4</td>
         <td align="right">4</td>
         <td align="right">6</td>
         <td align="right">6</td>
         <td align="right">6</td>
         <td align="right">8</td>
         <td align="right">8</td>
         <td align="right">10</td>
         <td align="right">12</td>
         <td align="right">14</td>
      </tr>
      <tr>
         <td>Blueberry</td>
         <td align="right">0.1</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">4</td>
         <td align="right">6</td>
         <td align="right">8</td>
         <td align="right">10</td>
         <td align="right">12</td>
         <td align="right">14</td>
         <td align="right">16</td>
         <td align="right">18</td>
         <td align="right">20</td>
         <td align="right">24</td>
         <td align="right">28</td>
         <td align="right">30</td>
         <td align="right">36</td>
      </tr>
      <tr>
         <td>Boysenberry</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">2.5</td>
         <td align="right">4</td>
         <td align="right">5.5</td>
         <td align="right">7</td>
         <td align="right">8.5</td>
         <td align="right">10</td>
         <td align="right">11.5</td>
         <td align="right">13</td>
         <td align="right">14.5</td>
         <td align="right">16</td>
         <td align="right">17.5</td>
         <td align="right">19</td>
         <td align="right">20.5</td>
         <td align="right">22</td>
      </tr>
      <tr>
         <td>Cherry</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">2.5</td>
         <td align="right">5</td>
         <td align="right">8</td>
         <td align="right">10</td>
         <td align="right">15</td>
         <td align="right">20</td>
         <td align="right">25</td>
         <td align="right">28</td>
         <td align="right">31</td>
         <td align="right">35</td>
         <td align="right">40</td>
         <td align="right">45</td>
         <td align="right">50</td>
         <td align="right">55</td>
      </tr>
      <tr>
         <td>Coconut</td>
         <td align="right">0.1</td>
         <td align="right">0.25</td>
         <td align="right">0.5</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">1</td>
         <td align="right">2</td>
         <td align="right">2</td>
         <td align="right">2</td>
         <td align="right">2</td>
         <td align="right">2.5</td>
         <td align="right">2.5</td>
         <td align="right">3</td>
         <td align="right">3</td>
         <td align="right">3</td>
         <td align="right">3</td>
      </tr>
      <tr>
         </br>
         </br>
         <td><strong>Category 2 Origin Asia</strong></td>
         <td align="right"><strong>10</strong></td>
         <td align="right"><strong>100</strong></td>
         <td align="right"><strong>1000</strong></td>
         <td align="right"><strong>2000</strong></td>
         <td align="right"><strong>3000</strong></td>
         <td align="right"><strong>4000</strong></td>
         <td align="right"><strong>5000</strong></td>
         <td align="right"><strong>6000</strong></td>
         <td align="right"><strong>7000</strong></td>
         <td align="right"><strong>8000</strong></td>
         <td align="right"><strong>9000</strong></td>
         <td align="right"><strong>1000</strong></td>
         <td align="right"><strong>10000</strong></td>
         <td align="right"><strong>20000</strong></td>
         <td align="right"><strong>30000</strong></td>
         <td align="right"><strong>40000</strong></td>
      </tr>
      <tr>
         <td>Apple</td>
         <td align="right">0.1</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">5</td>
         <td align="right">10</td>
         <td align="right">15</td>
         <td align="right">17.7</td>
         <td align="right">21.5</td>
         <td align="right">25.3</td>
         <td align="right">29.1</td>
         <td align="right">32.9</td>
         <td align="right">36.7</td>
         <td align="right">40.5</td>
         <td align="right">44.3</td>
         <td align="right">48.1</td>
         <td align="right">51.9</td>
      </tr>
      <tr>
         <td>Apricot</td>
         <td align="right">0</td>
         <td align="right">0</td>
         <td align="right">0</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">1.5</td>
         <td align="right">2</td>
         <td align="right">2.5</td>
         <td align="right">3</td>
         <td align="right">3.5</td>
         <td align="right">4</td>
         <td align="right">4.5</td>
         <td align="right">5</td>
         <td align="right">5.5</td>
         <td align="right">6</td>
         <td align="right">7</td>
      </tr>
      <tr>
         <td>Banana</td>
         <td align="right">0.1</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">5</td>
         <td align="right">10</td>
         <td align="right">15</td>
         <td align="right">20</td>
         <td align="right">25</td>
         <td align="right">27</td>
         <td align="right">30</td>
         <td align="right">33</td>
         <td align="right">36</td>
         <td align="right">40</td>
         <td align="right">45</td>
         <td align="right">50</td>
         <td align="right">55</td>
      </tr>
      <tr>
         <td>Bilberry</td>
         <td align="right">1</td>
         <td align="right">5</td>
         <td align="right">10</td>
         <td align="right">15</td>
         <td align="right">20</td>
         <td align="right">25</td>
         <td align="right">30</td>
         <td align="right">35</td>
         <td align="right">40</td>
         <td align="right">45</td>
         <td align="right">50</td>
         <td align="right">55</td>
         <td align="right">60</td>
         <td align="right">65</td>
         <td align="right">70</td>
         <td align="right">75</td>
      </tr>
      <tr>
         <td>Blackberry</td>
         <td align="right">0.1</td>
         <td align="right">5</td>
         <td align="right">10</td>
         <td align="right">20</td>
         <td align="right">50</td>
         <td align="right">75</td>
         <td align="right">100</td>
         <td align="right">125</td>
         <td align="right">150</td>
         <td align="right">175</td>
         <td align="right">200</td>
         <td align="right">225</td>
         <td align="right">250</td>
         <td align="right">275</td>
         <td align="right">300</td>
         <td align="right">350</td>
      </tr>
      <tr>
         <td>Blackcurrant</td>
         <td align="right">0.1</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">2</td>
         <td align="right">2</td>
         <td align="right">4</td>
         <td align="right">4</td>
         <td align="right">4</td>
         <td align="right">6</td>
         <td align="right">6</td>
         <td align="right">6</td>
         <td align="right">8</td>
         <td align="right">8</td>
         <td align="right">10</td>
         <td align="right">12</td>
         <td align="right">14</td>
      </tr>
      <tr>
         <td>Blueberry</td>
         <td align="right">0.1</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">4</td>
         <td align="right">6</td>
         <td align="right">8</td>
         <td align="right">10</td>
         <td align="right">12</td>
         <td align="right">14</td>
         <td align="right">16</td>
         <td align="right">18</td>
         <td align="right">20</td>
         <td align="right">24</td>
         <td align="right">28</td>
         <td align="right">30</td>
         <td align="right">36</td>
      </tr>
      <tr>
         <td>Boysenberry</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">2.5</td>
         <td align="right">4</td>
         <td align="right">5.5</td>
         <td align="right">7</td>
         <td align="right">8.5</td>
         <td align="right">10</td>
         <td align="right">11.5</td>
         <td align="right">13</td>
         <td align="right">14.5</td>
         <td align="right">16</td>
         <td align="right">17.5</td>
         <td align="right">19</td>
         <td align="right">20.5</td>
         <td align="right">22</td>
      </tr>
      <tr>
         <td>Cherry</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">2.5</td>
         <td align="right">5</td>
         <td align="right">8</td>
         <td align="right">10</td>
         <td align="right">15</td>
         <td align="right">20</td>
         <td align="right">25</td>
         <td align="right">28</td>
         <td align="right">31</td>
         <td align="right">35</td>
         <td align="right">40</td>
         <td align="right">45</td>
         <td align="right">50</td>
         <td align="right">55</td>
      </tr>
      <tr>
         <td>Coconut</td>
         <td align="right">0.1</td>
         <td align="right">0.25</td>
         <td align="right">0.5</td>
         <td align="right">0.5</td>
         <td align="right">1</td>
         <td align="right">1</td>
         <td align="right">2</td>
         <td align="right">2</td>
         <td align="right">2</td>
         <td align="right">2</td>
         <td align="right">2.5</td>
         <td align="right">2.5</td>
         <td align="right">3</td>
         <td align="right">3</td>
         <td align="right">3</td>
         <td align="right">3</td>
      </tr>
   </tbody>
</table>
-3
erkind dunya 8 mars 2019 à 19:23

2 réponses

Meilleure réponse
  $("input[type='text'].element").blur(function(e) {
  var result = $("<span name='result'>");
  var multiplier = $(`table#${$("#ProductOrigin").val()} tbody > tr[product='${$(this).attr("id")}'] > td[volume='${$("#Volume>option:selected").val()}']`).text();
  $(this).next("span").remove();
  result.text($(this).val() * multiplier);
  $(this).after(result);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <label class="description" for="ProductOrigin">Product Origin</label>
    <select class="element select medium" id="ProductOrigin" name="ProductOrigin">
        <option value="" selected="selected"></option>
        <option value="Europe">Europe</option>
        <option value="Asia">Asia</option>
        <option value="China">China</option>
        <option value="India">India</option>
        <option value="USA">USA</option>
        <option value="Africa">Africa</option>
    </select>
</div>
<div>
    <label class="description" for="Volume">Volume</label>
    <select class="element select medium" id="Volume" name="Volume">
        <option value="" selected="selected"></option>
        <option value="10">10</option>
        <option value="100">100</option>
        <option value="1000">1000</option>
        <option value="2000">2000</option>
        <option value="3000">3000</option>
        <option value="4000">4000</option>
        <option value="5000">5000</option>
        <option value="6000">6000</option>
        <option value="6000">6000</option>
        <option value="8000">8000</option>
        <option value="9000">9000</option>
        <option value="10000">10000</option>
        <option value="20000">20000</option>
        <option value="30000">30000</option>
        <option value="40000">40000</option>
        <option value="50000">50000</option>
    </select>
</div>
<div>
    <label class="description" for="Apple">Apple</label>
    <input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Apricot">Apricot</label>
    <input id="Apricot" name="Apricot" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Banana">Banana</label>
    <input id="Banana" name="Banana" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Bilberry">Bilberry</label>
    <input id="Bilberry" name="Bilberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Blackberry">Blackberry</label>
    <input id="Blackberry" name="Blackberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Blackcurrant">Blackcurrant</label>
    <input id="Blackcurrant" name="Blackcurrant" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Blueberry">Blueberry</label>
    <input id="Blueberry" name="Blueberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Boysenberry">Boysenberry</label>
    <input id="Boysenberry" name="Boysenberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Cherry">Cherry</label>
    <input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
    <label class="description" for="Coconut">Coconut</label>
    <input id="Coconut" name="Coconut" class="element text medium" type="text" maxlength="255" value="" />
</div>


<table id="Europe">
    <thead>Europe</thead>
        <tr>
            <td>Europe</td>
            <th id=10>10</th>
            <th id=100>100</th>
            <th id=1000>1000</th>
            <th id=2000>2000</th>
            <th id=3000>3000</th>
            <th id=4000>4000</th>
            <th id=5000>5000</th>
            <th id=6000>6000</th>
            <th id=7000>7000</th>
            <th id=8000>8000</th>
            <th id=9000>9000</th>
            <th id=10000>10000</th>
            <th id=20000>20000</th>
            <th id=30000>30000</th>
            <th id=40000>40000</th>
            <th id=50000>50000</th>
        </tr>
    <tbody>
        <tr product='Apple'>
            <td>Apple</td>
            <td volume='10'>0.1</td>
            <td volume='100'>0.5</td>
            <td volume='1000'>1</td>
            <td volume='2000'>2</td>
            <td volume='3000'>3</td>
            <td volume='4000'>4</td>
            <td volume='5000'>5</td>
            <td volume='6000'>6</td>
            <td volume='7000'>7</td>
            <td volume='8000'>8</td>
            <td volume='9000'>9</td>
            <td volume='10000'>10</td>
            <td volume='20000'>11</td>
            <td volume='30000'>12</td>
            <td volume='40000'>13</td>
            <td volume='50000'>14</td>
        </tr>
        <tr product='Apricot'>
                <td>Apricot</td>
                <td volume='10'>0</td>
                <td volume='100'>0</td>
                <td volume='1000'>0</td>
                <td volume='2000'>0.5</td>
                <td volume='3000'>1</td>
                <td volume='4000'>1.5</td>
                <td volume='5000'>2</td>
                <td volume='6000'>2.5</td>
                <td volume='7000'>3</td>
                <td volume='8000'>3.5</td>
                <td volume='9000'>4</td>
                <td volume='10000'>4.5</td>
                <td volume='20000'>5</td>
                <td volume='30000'>5.5</td>
                <td volume='40000'>6</td>
                <td volume='50000'>7</td>
        </tr>
        <tr product='Banana'>
                <td>Banana</td>
                <td volume='10'>0.1</td>
                <td volume='100'>0.5</td>
                <td volume='1000'>1</td>
                <td volume='2000'>5</td>
                <td volume='3000'>10</td>
                <td volume='4000'>15</td>
                <td volume='5000'>20</td>
                <td volume='6000'>25</td>
                <td volume='7000'>27</td>
                <td volume='8000'>30</td>
                <td volume='9000'>33</td>
                <td volume='10000'>36</td>
                <td volume='20000'>40</td>
                <td volume='30000'>45</td>
                <td volume='40000'>50</td>
                <td volume='50000'>55</td>
              </tr>
              <tr product='Bilberry'>
                <td>Bilberry</td>
                <td volume='10'>1</td>
                <td volume='100'>5</td>
                <td volume='1000'>10</td>
                <td volume='2000'>15</td>
                <td volume='3000'>20</td>
                <td volume='4000'>25</td>
                <td volume='5000'>30</td>
                <td volume='6000'>35</td>
                <td volume='7000'>40</td>
                <td volume='8000'>45</td>
                <td volume='9000'>50</td>
                <td volume='10000'>55</td>
                <td volume='20000'>60</td>
                <td volume='30000'>65</td>
                <td volume='40000'>70</td>
                <td volume='50000'>75</td>
              </tr>
              <tr product='Blackberry'>
                <td>Blackberry</td>
                <td volume='10'>0.1</td>
                <td volume='100'>5</td>
                <td volume='1000'>10</td>
                <td volume='2000'>20</td>
                <td volume='3000'>50</td>
                <td volume='4000'>75</td>
                <td volume='5000'>100</td>
                <td volume='6000'>125</td>
                <td volume='7000'>150</td>
                <td volume='8000'>175</td>
                <td volume='9000'>200</td>
                <td volume='10000'>225</td>
                <td volume='20000'>250</td>
                <td volume='30000'>275</td>
                <td volume='40000'>300</td>
                <td volume='50000'>350</td>
              </tr>
              <tr product='Blackcurrant'>
                <td>Blackcurrant</td>
                <td volume='10'>0.1</td>
                <td volume='100'>0.5</td>
                <td volume='1000'>1</td>
                <td volume='2000'>2</td>
                <td volume='3000'>2</td>
                <td volume='4000'>4</td>
                <td volume='5000'>4</td>
                <td volume='6000'>4</td>
                <td volume='7000'>6</td>
                <td volume='8000'>6</td>
                <td volume='9000'>6</td>
                <td volume='10000'>8</td>
                <td volume='20000'>8</td>
                <td volume='30000'>10</td>
                <td volume='40000'>12</td>
                <td volume='50000'>14</td>
              </tr>
              <tr product='Blueberry'>
                <td>Blueberry</td>
                <td volume='10'>0.1</td>
                <td volume='100'>0.5</td>
                <td volume='1000'>1</td>
                <td volume='2000'>4</td>
                <td volume='3000'>6</td>
                <td volume='4000'>8</td>
                <td volume='5000'>10</td>
                <td volume='6000'>12</td>
                <td volume='7000'>14</td>
                <td volume='8000'>16</td>
                <td volume='9000'>18</td>
                <td volume='10000'>20</td>
                <td volume='20000'>24</td>
                <td volume='30000'>28</td>
                <td volume='40000'>30</td>
                <td volume='50000'>36</td>
              </tr>
              <tr product='Boysenberry'>
                <td>Boysenberry</td>
                <td volume='10'>0.5</td>
                <td volume='100'>1</td>
                <td volume='1000'>2.5</td>
                <td volume='2000'>4</td>
                <td volume='3000'>5.5</td>
                <td volume='4000'>7</td>
                <td volume='5000'>8.5</td>
                <td volume='6000'>10</td>
                <td volume='7000'>11.5</td>
                <td volume='8000'>13</td>
                <td volume='9000'>14.5</td>
                <td volume='10000'>16</td>
                <td volume='20000'>17.5</td>
                <td volume='30000'>19</td>
                <td volume='40000'>20.5</td>
                <td volume='50000'>22</td>
              </tr>
              <tr product='Cherry'>
                <td>Cherry</td>
                <td volume='10'>0.5</td>
                <td volume='100'>1</td>
                <td volume='1000'>2.5</td>
                <td volume='2000'>5</td>
                <td volume='3000'>8</td>
                <td volume='4000'>10</td>
                <td volume='5000'>15</td>
                <td volume='6000'>20</td>
                <td volume='7000'>25</td>
                <td volume='8000'>28</td>
                <td volume='9000'>31</td>
                <td volume='10000'>35</td>
                <td volume='20000'>40</td>
                <td volume='30000'>45</td>
                <td volume='40000'>50</td>
                <td volume='50000'>55</td>
              </tr>
              <tr product='Coconut'>
                <td>Coconut</td>
                <td volume='10'>0.1</td>
                <td volume='100'>0.25</td>
                <td volume='1000'>0.5</td>
                <td volume='2000'>0.5</td>
                <td volume='3000'>1</td>
                <td volume='4000'>1</td>
                <td volume='5000'>2</td>
                <td volume='6000'>2</td>
                <td volume='7000'>2</td>
                <td volume='8000'>2</td>
                <td volume='9000'>2.5</td>
                <td volume='10000'>2.5</td>
                <td volume='20000'>3</td>
                <td volume='30000'>3</td>
                <td volume='40000'>3</td>
                <td volume='50000'>3</td>
              </tr>
    </tbody>
</table>

Ceci est une version fonctionnelle.

0
erkind dunya 12 mars 2019 à 10:54

Votre code HTML rend votre tâche beaucoup plus difficile qu'elle ne devrait l'être. Le fait que vos options select ne soient pas directement liées à la table à partir de laquelle vous avez besoin d'une valeur est probablement votre principale source de chagrin. Cette réponse laisse votre code HTML seul et fonctionne avec. Pour une solution plus simple, je recommande ;

  1. Donnez un ID à vos tables de référence et faites de cet ID la valeur des options de sélection d'origine.
  2. Donnez à vos cellules de tableau un attribut qui se rapporte ou correspond à la valeur de l'option de sélection de volume associée.

EXEMPLE de modifications HTML

<table id="origin_1">
   <thead>...Europe...<thead>
   <tbody>
      <tr product='apple'>...<td volume='1000'>0.5</td>...</tr>
   </tbody>
</table>

 $("input[type='text'].element").blur(function(e) {
  var result = $("<span name='result'>");
  var multiplier = $(`table#${$("#element_2").val()} tbody > tr[product='${$(this).attr("id")}'] > td[volume='${$("#element_1>option:selected").val()}']`).text();
  $(this).next("span").remove();
  result.text($(this).val() * multiplier);
  $(this).after(result);
});

SNIPPET HTML EXISTANT

$("input[type='text'].element").blur(function(e) {
  //get the origin
  var origin = $("#element_2>option:selected").text();
  //get the right lookup table (would be simpler if it had an ID with the value of the ORIGIN select)
  var $tblOrig = $($("table>thead>tr>th:first-child()>strong")
    .filter((index, elem) => $(elem).text().includes(origin)).closest("table"));
  //get the volume
  var volume = $("#element_1>option:selected").val();
  //calculate the targeted table row, we can use the ID for this
  var product_ord = $(this).attr("id").split("_")[1];
  //get the cell number that we need (would be easier of the value of the volume option was the index)
  var volume_ord =
    $("#element_1>option").map((i, e) => {
      return e.value == volume ? {
        index: i + 1
      } : null;
    })[0].index;
  //console.log(volume_ord);

  //get the multiplier
  //make somewhere to store the answer
  var result = $("<span name='result'>");
  //get the value from the right cell
  var multiplier = $tblOrig
    .find(`tbody > tr:nth-child(${product_ord}) > td:nth-child(${volume_ord})`).text();
  //console.log(multiplier);
  //remove a previous answer if there is one
  $(this).next("span").remove();
  //get the new answer
  result.text($(this).val() * multiplier);
  //put it after the text input
  $(this).after(result);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label class="description" for="element_2">Product Origin</label>
  <select class="element select medium" id="element_2" name="element_2">
    <option value="" selected="selected"></option>
    <option value="1">Europe</option>
    <option value="2">Asia</option>
    <option value="3">China</option>
    <option value="3">India</option>
    <option value="3">USA</option>
    <option value="3">Africa</option>
  </select>
</div>
<div>
  <label class="description" for="element_1">Volume</label>
  <select class="element select medium" id="element_1" name="element_1">
    <option value="" selected="selected"></option>
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="2000">2000</option>
    <option value="3000">3000</option>
    <option value="4000">4000</option>
    <option value="5000">5000</option>
    <option value="6000">6000</option>
    <option value="6000">6000</option>
    <option value="8000">8000</option>
    <option value="9000">9000</option>
    <option value="10000">10000</option>
    <option value="20000">20000</option>
    <option value="30000">30000</option>
    <option value="40000">40000</option>
    <option value="50000">50000</option>
  </select>
</div>
<div>
  <label class="description" for="element_1">Apple </label>
  <input id="element_1" name="element_1" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="element_2">Apricot </label>
  <input id="element_2" name="element_2" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="element_3">Banana </label>
  <input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="element_4">Bilberry </label>
  <input id="element_4" name="element_4" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="element_5">Blackberry </label>
  <input id="element_5" name="element_5" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="element_6">Blackcurrant </label>
  <input id="element_6" name="element_6" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="element_7">Blueberry </label>
  <input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="element_8">Boysenberry </label>
  <input id="element_8" name="element_8" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="element_9">Cherry </label>
  <input id="element_9" name="element_9" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="element_10">Coconut </label>
  <input id="element_10" name="element_10" class="element text medium" type="text" maxlength="255" value="" />
</div>
<table class="table table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th title="Field #1"><strong>Category 1: Origin Europe</strong></th>
      <th title="Field #2"><strong>10</strong></th>
      <th title="Field #3"><strong>100</strong></th>
      <th title="Field #4"><strong>1000</strong></th>
      <th title="Field #5"><strong>2000</strong></th>
      <th title="Field #6"><strong>3000</strong></th>
      <th title="Field #7"><strong>4000</strong></th>
      <th title="Field #8"><strong>5000</strong></th>
      <th title="Field #9"><strong>6000</strong></th>
      <th title="Field #10"><strong>7000</strong></th>
      <th title="Field #11"><strong>8000</strong></th>
      <th title="Field #12"><strong>9000</strong></th>
      <th title="Field #13"><strong>1000</strong></th>
      <th title="Field #14"><strong>10000</strong></th>
      <th title="Field #15"><strong>20000</strong></th>
      <th title="Field #16"><strong>30000</strong></th>
      <th title="Field #17"><strong>40000</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td align="right">0.1</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">2</td>
      <td align="right">3</td>
      <td align="right">4</td>
      <td align="right">5</td>
      <td align="right">6</td>
      <td align="right">7</td>
      <td align="right">8</td>
      <td align="right">9</td>
      <td align="right">10</td>
      <td align="right">11</td>
      <td align="right">12</td>
      <td align="right">13</td>
      <td align="right">14</td>
    </tr>
    <tr>
      <td>Apricot</td>
      <td align="right">0</td>
      <td align="right">0</td>
      <td align="right">0</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">1.5</td>
      <td align="right">2</td>
      <td align="right">2.5</td>
      <td align="right">3</td>
      <td align="right">3.5</td>
      <td align="right">4</td>
      <td align="right">4.5</td>
      <td align="right">5</td>
      <td align="right">5.5</td>
      <td align="right">6</td>
      <td align="right">7</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td align="right">0.1</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">2</td>
      <td align="right">4</td>
      <td align="right">5</td>
      <td align="right">6</td>
      <td align="right">7</td>
      <td align="right">8</td>
      <td align="right">9</td>
      <td align="right">10</td>
      <td align="right">12</td>
      <td align="right">14</td>
      <td align="right">16</td>
      <td align="right">18</td>
      <td align="right">20</td>
    </tr>
    <tr>
      <td>Bilberry</td>
      <td align="right">1</td>
      <td align="right">5</td>
      <td align="right">10</td>
      <td align="right">10</td>
      <td align="right">15</td>
      <td align="right">20</td>
      <td align="right">25</td>
      <td align="right">30</td>
      <td align="right">35</td>
      <td align="right">40</td>
      <td align="right">45</td>
      <td align="right">50</td>
      <td align="right">55</td>
      <td align="right">60</td>
      <td align="right">65</td>
      <td align="right">70</td>
    </tr>
    <tr>
      <td>Blackberry</td>
      <td align="right">0.1</td>
      <td align="right">5</td>
      <td align="right">10</td>
      <td align="right">20</td>
      <td align="right">50</td>
      <td align="right">75</td>
      <td align="right">100</td>
      <td align="right">125</td>
      <td align="right">150</td>
      <td align="right">175</td>
      <td align="right">200</td>
      <td align="right">225</td>
      <td align="right">250</td>
      <td align="right">275</td>
      <td align="right">300</td>
      <td align="right">350</td>
    </tr>
    <tr>
      <td>Blackcurrant</td>
      <td align="right">0.1</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">2</td>
      <td align="right">2</td>
      <td align="right">4</td>
      <td align="right">4</td>
      <td align="right">4</td>
      <td align="right">6</td>
      <td align="right">6</td>
      <td align="right">6</td>
      <td align="right">8</td>
      <td align="right">8</td>
      <td align="right">10</td>
      <td align="right">12</td>
      <td align="right">14</td>
    </tr>
    <tr>
      <td>Blueberry</td>
      <td align="right">0.1</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">4</td>
      <td align="right">6</td>
      <td align="right">8</td>
      <td align="right">10</td>
      <td align="right">12</td>
      <td align="right">14</td>
      <td align="right">16</td>
      <td align="right">18</td>
      <td align="right">20</td>
      <td align="right">24</td>
      <td align="right">28</td>
      <td align="right">30</td>
      <td align="right">36</td>
    </tr>
    <tr>
      <td>Boysenberry</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">2.5</td>
      <td align="right">4</td>
      <td align="right">5.5</td>
      <td align="right">7</td>
      <td align="right">8.5</td>
      <td align="right">10</td>
      <td align="right">11.5</td>
      <td align="right">13</td>
      <td align="right">14.5</td>
      <td align="right">16</td>
      <td align="right">17.5</td>
      <td align="right">19</td>
      <td align="right">20.5</td>
      <td align="right">22</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">2.5</td>
      <td align="right">5</td>
      <td align="right">8</td>
      <td align="right">10</td>
      <td align="right">15</td>
      <td align="right">20</td>
      <td align="right">25</td>
      <td align="right">28</td>
      <td align="right">31</td>
      <td align="right">35</td>
      <td align="right">40</td>
      <td align="right">45</td>
      <td align="right">50</td>
      <td align="right">55</td>
    </tr>
    <tr>
      <td>Coconut</td>
      <td align="right">0.1</td>
      <td align="right">0.25</td>
      <td align="right">0.5</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">1</td>
      <td align="right">2</td>
      <td align="right">2</td>
      <td align="right">2</td>
      <td align="right">2</td>
      <td align="right">2.5</td>
      <td align="right">2.5</td>
      <td align="right">3</td>
      <td align="right">3</td>
      <td align="right">3</td>
      <td align="right">3</td>
    </tr>
    <tr>
      </br>
      </br>
      <td><strong>Category 2 Origin Asia</strong></td>
      <td align="right"><strong>10</strong></td>
      <td align="right"><strong>100</strong></td>
      <td align="right"><strong>1000</strong></td>
      <td align="right"><strong>2000</strong></td>
      <td align="right"><strong>3000</strong></td>
      <td align="right"><strong>4000</strong></td>
      <td align="right"><strong>5000</strong></td>
      <td align="right"><strong>6000</strong></td>
      <td align="right"><strong>7000</strong></td>
      <td align="right"><strong>8000</strong></td>
      <td align="right"><strong>9000</strong></td>
      <td align="right"><strong>1000</strong></td>
      <td align="right"><strong>10000</strong></td>
      <td align="right"><strong>20000</strong></td>
      <td align="right"><strong>30000</strong></td>
      <td align="right"><strong>40000</strong></td>
    </tr>
    <tr>
      <td>Apple</td>
      <td align="right">0.1</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">5</td>
      <td align="right">10</td>
      <td align="right">15</td>
      <td align="right">17.7</td>
      <td align="right">21.5</td>
      <td align="right">25.3</td>
      <td align="right">29.1</td>
      <td align="right">32.9</td>
      <td align="right">36.7</td>
      <td align="right">40.5</td>
      <td align="right">44.3</td>
      <td align="right">48.1</td>
      <td align="right">51.9</td>
    </tr>
    <tr>
      <td>Apricot</td>
      <td align="right">0</td>
      <td align="right">0</td>
      <td align="right">0</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">1.5</td>
      <td align="right">2</td>
      <td align="right">2.5</td>
      <td align="right">3</td>
      <td align="right">3.5</td>
      <td align="right">4</td>
      <td align="right">4.5</td>
      <td align="right">5</td>
      <td align="right">5.5</td>
      <td align="right">6</td>
      <td align="right">7</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td align="right">0.1</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">5</td>
      <td align="right">10</td>
      <td align="right">15</td>
      <td align="right">20</td>
      <td align="right">25</td>
      <td align="right">27</td>
      <td align="right">30</td>
      <td align="right">33</td>
      <td align="right">36</td>
      <td align="right">40</td>
      <td align="right">45</td>
      <td align="right">50</td>
      <td align="right">55</td>
    </tr>
    <tr>
      <td>Bilberry</td>
      <td align="right">1</td>
      <td align="right">5</td>
      <td align="right">10</td>
      <td align="right">15</td>
      <td align="right">20</td>
      <td align="right">25</td>
      <td align="right">30</td>
      <td align="right">35</td>
      <td align="right">40</td>
      <td align="right">45</td>
      <td align="right">50</td>
      <td align="right">55</td>
      <td align="right">60</td>
      <td align="right">65</td>
      <td align="right">70</td>
      <td align="right">75</td>
    </tr>
    <tr>
      <td>Blackberry</td>
      <td align="right">0.1</td>
      <td align="right">5</td>
      <td align="right">10</td>
      <td align="right">20</td>
      <td align="right">50</td>
      <td align="right">75</td>
      <td align="right">100</td>
      <td align="right">125</td>
      <td align="right">150</td>
      <td align="right">175</td>
      <td align="right">200</td>
      <td align="right">225</td>
      <td align="right">250</td>
      <td align="right">275</td>
      <td align="right">300</td>
      <td align="right">350</td>
    </tr>
    <tr>
      <td>Blackcurrant</td>
      <td align="right">0.1</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">2</td>
      <td align="right">2</td>
      <td align="right">4</td>
      <td align="right">4</td>
      <td align="right">4</td>
      <td align="right">6</td>
      <td align="right">6</td>
      <td align="right">6</td>
      <td align="right">8</td>
      <td align="right">8</td>
      <td align="right">10</td>
      <td align="right">12</td>
      <td align="right">14</td>
    </tr>
    <tr>
      <td>Blueberry</td>
      <td align="right">0.1</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">4</td>
      <td align="right">6</td>
      <td align="right">8</td>
      <td align="right">10</td>
      <td align="right">12</td>
      <td align="right">14</td>
      <td align="right">16</td>
      <td align="right">18</td>
      <td align="right">20</td>
      <td align="right">24</td>
      <td align="right">28</td>
      <td align="right">30</td>
      <td align="right">36</td>
    </tr>
    <tr>
      <td>Boysenberry</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">2.5</td>
      <td align="right">4</td>
      <td align="right">5.5</td>
      <td align="right">7</td>
      <td align="right">8.5</td>
      <td align="right">10</td>
      <td align="right">11.5</td>
      <td align="right">13</td>
      <td align="right">14.5</td>
      <td align="right">16</td>
      <td align="right">17.5</td>
      <td align="right">19</td>
      <td align="right">20.5</td>
      <td align="right">22</td>
    </tr>
    <tr>
      <td>Cherry</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">2.5</td>
      <td align="right">5</td>
      <td align="right">8</td>
      <td align="right">10</td>
      <td align="right">15</td>
      <td align="right">20</td>
      <td align="right">25</td>
      <td align="right">28</td>
      <td align="right">31</td>
      <td align="right">35</td>
      <td align="right">40</td>
      <td align="right">45</td>
      <td align="right">50</td>
      <td align="right">55</td>
    </tr>
    <tr>
      <td>Coconut</td>
      <td align="right">0.1</td>
      <td align="right">0.25</td>
      <td align="right">0.5</td>
      <td align="right">0.5</td>
      <td align="right">1</td>
      <td align="right">1</td>
      <td align="right">2</td>
      <td align="right">2</td>
      <td align="right">2</td>
      <td align="right">2</td>
      <td align="right">2.5</td>
      <td align="right">2.5</td>
      <td align="right">3</td>
      <td align="right">3</td>
      <td align="right">3</td>
      <td align="right">3</td>
    </tr>
  </tbody>
</table>
0
Steve0 8 mars 2019 à 20:52