Py学习  »  Jquery

JS或Jquery上基于类别选择的复杂计算

erkind dunya • 4 年前 • 220 次点击  

我有一张类似excel的表格 The image version ,我需要使用JS或JQuery对HTML进行实时计算。 下面的示例基于单个值进行计算,您可以看到我的更改,我有两个下拉列表10个选择,另一个有16个选择。

计算规则为: 起源欧洲 音量 10,那么对于匹配的10个数字字段,我需要计算数量x 10下表对应值

表中的相应值为 0个 0个 .

233个 表中的相应值为 所以我的结果是 233个

所以,我有10个表用于查找它根据 起源 下拉并 . 如果我有一个很容易当我有更多的表我有点零散我想有一些好的方法来做计算。 提前谢谢你的帮助。

jquery- calculate a total value after filling out a checkbox/radio/dropdown form




    





    
<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>
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/54291
 
220 次点击  
文章 [ 2 ]  |  最新文章 4 年前
erkind dunya
Reply   •   1 楼
erkind dunya    5 年前

  $("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>
计算下拉匹配表

这是工作版本。

Steve0
Reply   •   2 楼
Steve0    5 年前

你的html使你的任务比它需要的困难得多。事实上 select

  1. 给引用表一个ID,并将该ID设为origin select选项的值。
  2. 为表单元格提供一个与“相关卷选择”选项相关或是其值的属性。

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);
});

$("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>