我有一张类似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>