从跨度元素计算总计

Question

我更改了跨度值，因此需要获得跨度的总计。 我为输入字段指定了一个名为“ sumDiv”的顶级div ID，我的Span也具有“ name”属性，如下所示

var result = $("<span name='result'>"); 

计算所有跨度的函数如下：

function getDivSum(selector) {
          var sum = 0;
          $(selector).each(function() {
            $(this`enter code here`).children("span").each(function() {
              sum += parseInt($(this).html());
            });
          });
          return sum;
        }
        $(document).ready(function() {
          console.log(getDivSum("#sumDiv"));
        });

我的总积分为0，我在做什么错？ 这应该获得所有跨度值

 $(this`enter code here`).children("span").each(function() {

但我在控制台日志上得到0值。

也尝试过

$('.parent').each(function(){   
    var sum = 0;
    var counts = $(this).find('.count');

    counts.each(function() {
        sum+= parseInt($(this).text());
    });  
    console.log(sum);  
});

无法使其工作。

Codepen： https ：//codepen.io/dunya/pen/MxXqrZ

谢谢

 function myLoad() { var apple = 777777; var apricot = 111111 ; var banana = 222222 ; var bilberry = 3333 ; var blackberry = 3333 ; var blackcurrant = 2222 ; var blueberry = 88888 ; var boysenberry = 8888888 ; var cherry = 99999 ; var coconut = 99887 ; $("#Apple").value = apple; $("#Apricot").value = apricot; $("#Banana").value = banana; $("#Bilberry").value = bilberry; $("#Blackberry").value = blackberry; $("#Blackcurrant").value = blackcurrant; $("#Blueberry").value = blueberry; $("#Boysenberry").value = boysenberry; $("#Cherry").value = cherry; $("#Coconut").value = coconut; } function myCalculate(){ var volume = $("#Volume").val(); var productOrigin = $("#ProductOrigin").val(); var geographicalLocation = $("#GeoLocation").val(); if (volume === "" || productOrigin === "") { // alert("Please select the product origin and volume."); return; } var tableToUse = geographicalLocation === "" ? productOrigin : geographicalLocation; $("input[type='text']").each(function(i){ // Current product ID, eg "Apple", "Apricot", etc. var currentProductId = $(this).attr('id'); // Amount to multiply. var multiplier = $(`table#${tableToUse} tbody > tr[product='${currentProductId}'] > td[volume='${volume}']`).text(); // A <span> element, to be populated with the calculated product volume. var result = $("<span name='result'>"); // Calculate the figure and update the result element. result.text($(this).val() * multiplier); // Remove any previously added <span> result elements. $(this).next("span").remove(); // Insert result after the current input field. $(this).after(result); // to calculate Grand total function getDivSum(selector) { var sum = 0; $(selector).each(function() { $(this).children("span").each(function() { sum += parseInt($(this).html()); }); }); return sum; } $(document).ready(function() { console.log(getDivSum("#sumDiv")); }); }); } myLoad(); $('.select').on('change', myCalculate); $("input[type='text']").on('keyup', myCalculate); 

 <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="GeoLocation">Geographical Location</label> <select class="element select medium" id="GeoLocation" name="GeoLocation"> <option value="" selected="selected"></option> <option value="England">England</option> <option value="Scotland">Scotland</option> <option value="Wales">Wales</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 id="sumDiv"> <div> <label class="description" for="Apple">Apple</label> <input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Apricot">Apricot</label> <input id="Apricot" name="Apricot" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Banana">Banana</label> <input id="Banana" name="Banana" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Bilberry">Bilberry</label> <input id="Bilberry" name="Bilberry" class="element text medium" type="text" maxlength="255" value="10" readonly="true" /> </div> <div> <label class="description" for="Blackberry">Blackberry</label> <input id="Blackberry" name="Blackberry" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Blackcurrant">Blackcurrant</label> <input id="Blackcurrant" name="Blackcurrant" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Blueberry">Blueberry</label> <input id="Blueberry" name="Blueberry" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Boysenberry">Boysenberry</label> <input id="Boysenberry" name="Boysenberry" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Cherry">Cherry</label> <input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Coconut">Coconut</label> <input id="Coconut" name="Coconut" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="GrandTotal">Grand Total</label> <input id="GrandTotal" name="GrandTotal" class="element text medium" type="text" maxlength="255" value="" readonly="true"/> </div> </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> <table id="England"> <thead>England</thead> <tr> <td>England</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'>10</td> <td volume='100'>10</td> <td volume='1000'>10</td> <td volume='2000'>20</td> <td volume='3000'>30</td> <td volume='4000'>40</td> <td volume='5000'>50</td> <td volume='6000'>60</td> <td volume='7000'>70</td> <td volume='8000'>80</td> <td volume='9000'>90</td> <td volume='10000'>100</td> <td volume='20000'>110</td> <td volume='30000'>120</td> <td volume='40000'>130</td> <td volume='50000'>140</td> </tr> <tr product='Apricot'> <td>Apricot</td> <td volume='10'>10</td> <td volume='100'>10</td> <td volume='1000'>10</td> <td volume='2000'>20</td> <td volume='3000'>30</td> <td volume='4000'>40</td> <td volume='5000'>50</td> <td volume='6000'>60</td> <td volume='7000'>70</td> <td volume='8000'>80</td> <td volume='9000'>90</td> <td volume='10000'>100</td> <td volume='20000'>110</td> <td volume='30000'>120</td> <td volume='40000'>130</td> <td volume='50000'>140</td> </tr> <tr product='Banana'> <td>Banana</td> <td volume='10'>1</td> <td volume='100'>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'>20</td> <td volume='100'>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'>41</td> <td volume='100'>51</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'>500</td> <td volume='100'>10</td> <td volume='1000'>25</td> <td volume='2000'>4</td> <td volume='3000'>5</td> <td volume='4000'>7</td> <td volume='5000'>8</td> <td volume='6000'>10</td> <td volume='7000'>15</td> <td volume='8000'>13</td> <td volume='9000'>14</td> <td volume='10000'>16</td> <td volume='20000'>175</td> <td volume='30000'>19</td> <td volume='40000'>205</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'>41</td> <td volume='100'>5</td> <td volume='1000'>115</td> <td volume='2000'>445</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</td> <td volume='10000'>14</td> <td volume='20000'>3</td> <td volume='30000'>3</td> <td volume='40000'>3</td> <td volume='50000'>3</td> </tr> </tbody> </table> <div class=""> <table id="multiplierSemtricaValues"> <thead><strong>multiplierSemtricaValues</strong></thead> <tr> <td><strong>multiplierSemtricaValues</strong></td> <td id="">Value to apply</td> </tr> <tbody> <tr Semtrica='Apple'> <td>Apple</td> <td valueToCalc='Apple'>65</td> </tr> <tr Semtrica='Apricot'> <td>Apricot</td> <td valueToCalc='Apricot'>141</td> </tr> <tr Semtrica='Banana'> <td>Banana</td> <td valueToCalc='Banana'>100</td> </tr> <tr Semtrica='Bilberry'> <td>Bilberry</td> <td valueToCalc='Bilberry'>10.47</td> </tr> <tr Semtrica='Blackberry'> <td>Blackberry</td> <td valueToCalc='Blackberry'>312</td> </tr> <tr Semtrica='Blackcurrant'> <td>Blackcurrant</td> <td valueToCalc='Blackcurrant'>292</td> </tr> <tr Semtrica='Blueberry'> <td>Blueberry</td> <td valueToCalc='Blueberry'>32</td> </tr> <tr Semtrica='Boysenberry'> <td>Boysenberry</td> <td valueToCalc='Boysenberry'>50</td> </tr> <tr Semtrica='Cherry'> <td>Cherry</td> <td valueToCalc='Cherry'>100</td> </tr> <tr Semtrica='Cherry'> <td>Cherry</td> <td valueToCalc='Cherry'>50</td> </tr> </tbody> </table> </div> 

Answer 1

在Codepen中： https ://codepen.io/dunya/pen/MxXqrZ更改此行

$(this).children("span").each(function() {

有了这个

$(this).children().children("span").each(function() {

链接到已编辑的笔https://codepen.io/anon/pen/aMjoXy

Answer 2

控制台日志的问题是在记录日志时。

在准备好文档时，没有任何值或跨度，因此，当您尝试获取这些值时，您将只获取将转换为0且结果为0的空值。

更改输入时，将填充字段并运行处理程序，以便在输入框旁边获取结果。 你原来的代码使用.children在#sumDiv但这不会工作，因为跨度是不是该专区的儿童。

我将其更改为

$(this).find("span").each(function() {
    sum += parseInt($(this).html());
});

最后，您的总计为0，因为该字段没有任何值。 所以我只整理了一条简单的线来更新它

$("#GrandTotal").next().html(getDivSum("#sumDiv"))

我敢肯定，很多事情都可以优化，但是整个过程太繁琐了。 例如，您正在每个#sumDiv上运行一个循环，因为ID必须是唯一的，所以这不会发生。 如果您有#sumDiv ，则应该改用一个类，然后遍历该类

这是我创造的笔

https://codepen.io/anon/pen/pYZzEX

 function myLoad() { var apple = 777777; var apricot = 111111 ; var banana = 222222 ; var bilberry = 3333 ; var blackberry = 3333 ; var blackcurrant = 2222 ; var blueberry = 88888 ; var boysenberry = 8888888 ; var cherry = 99999 ; var coconut = 99887 ; $("#Apple").value = apple; $("#Apricot").value = apricot; $("#Banana").value = banana; $("#Bilberry").value = bilberry; $("#Blackberry").value = blackberry; $("#Blackcurrant").value = blackcurrant; $("#Blueberry").value = blueberry; $("#Boysenberry").value = boysenberry; $("#Cherry").value = cherry; $("#Coconut").value = coconut; } function myCalculate(){ var volume = $("#Volume").val(); var productOrigin = $("#ProductOrigin").val(); var geographicalLocation = $("#GeoLocation").val(); if (volume === "" || productOrigin === "") { // alert("Please select the product origin and volume."); return; } var tableToUse = geographicalLocation === "" ? productOrigin : geographicalLocation; $("input[type='text']").each(function(i){ // Current product ID, eg "Apple", "Apricot", etc. var currentProductId = $(this).attr('id'); // Amount to multiply. var multiplier = $(`table#${tableToUse} tbody > tr[product='${currentProductId}'] > td[volume='${volume}']`).text(); // A <span> element, to be populated with the calculated product volume. var result = $("<span name='result'>"); // Calculate the figure and update the result element. result.text($(this).val() * multiplier); // Remove any previously added <span> result elements. $(this).next("span").remove(); // Insert result after the current input field. $(this).after(result); // to calculate Grand total function getDivSum(selector) { var sum = 0; $(selector).each(function() { $(this).find("span").each(function() { sum += parseInt($(this).html()); }); }); return sum; } console.log(getDivSum("#sumDiv")) $("#GrandTotal").next().html(getDivSum("#sumDiv")) $(document).ready(function() { console.log(getDivSum("#sumDiv")); }); }); } myLoad(); $('.select').on('change', myCalculate); $("input[type='text']").on('keyup', myCalculate); 

 <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="GeoLocation">Geographical Location</label> <select class="element select medium" id="GeoLocation" name="GeoLocation"> <option value="" selected="selected"></option> <option value="England">England</option> <option value="Scotland">Scotland</option> <option value="Wales">Wales</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 id="sumDiv"> <div> <label class="description" for="Apple">Apple</label> <input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Apricot">Apricot</label> <input id="Apricot" name="Apricot" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Banana">Banana</label> <input id="Banana" name="Banana" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Bilberry">Bilberry</label> <input id="Bilberry" name="Bilberry" class="element text medium" type="text" maxlength="255" value="10" readonly="true" /> </div> <div> <label class="description" for="Blackberry">Blackberry</label> <input id="Blackberry" name="Blackberry" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Blackcurrant">Blackcurrant</label> <input id="Blackcurrant" name="Blackcurrant" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Blueberry">Blueberry</label> <input id="Blueberry" name="Blueberry" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Boysenberry">Boysenberry</label> <input id="Boysenberry" name="Boysenberry" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Cherry">Cherry</label> <input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="Coconut">Coconut</label> <input id="Coconut" name="Coconut" class="element text medium" type="text" maxlength="255" value="10" readonly="true"/> </div> <div> <label class="description" for="GrandTotal">Grand Total</label> <input id="GrandTotal" name="GrandTotal" class="element text medium" type="text" maxlength="255" value="" readonly="true"/> </div> </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> <table id="England"> <thead>England</thead> <tr> <td>England</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'>10</td> <td volume='100'>10</td> <td volume='1000'>10</td> <td volume='2000'>20</td> <td volume='3000'>30</td> <td volume='4000'>40</td> <td volume='5000'>50</td> <td volume='6000'>60</td> <td volume='7000'>70</td> <td volume='8000'>80</td> <td volume='9000'>90</td> <td volume='10000'>100</td> <td volume='20000'>110</td> <td volume='30000'>120</td> <td volume='40000'>130</td> <td volume='50000'>140</td> </tr> <tr product='Apricot'> <td>Apricot</td> <td volume='10'>10</td> <td volume='100'>10</td> <td volume='1000'>10</td> <td volume='2000'>20</td> <td volume='3000'>30</td> <td volume='4000'>40</td> <td volume='5000'>50</td> <td volume='6000'>60</td> <td volume='7000'>70</td> <td volume='8000'>80</td> <td volume='9000'>90</td> <td volume='10000'>100</td> <td volume='20000'>110</td> <td volume='30000'>120</td> <td volume='40000'>130</td> <td volume='50000'>140</td> </tr> <tr product='Banana'> <td>Banana</td> <td volume='10'>1</td> <td volume='100'>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'>20</td> <td volume='100'>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'>41</td> <td volume='100'>51</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'>500</td> <td volume='100'>10</td> <td volume='1000'>25</td> <td volume='2000'>4</td> <td volume='3000'>5</td> <td volume='4000'>7</td> <td volume='5000'>8</td> <td volume='6000'>10</td> <td volume='7000'>15</td> <td volume='8000'>13</td> <td volume='9000'>14</td> <td volume='10000'>16</td> <td volume='20000'>175</td> <td volume='30000'>19</td> <td volume='40000'>205</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'>41</td> <td volume='100'>5</td> <td volume='1000'>115</td> <td volume='2000'>445</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</td> <td volume='10000'>14</td> <td volume='20000'>3</td> <td volume='30000'>3</td> <td volume='40000'>3</td> <td volume='50000'>3</td> </tr> </tbody> </table> <div class=""> <table id="multiplierSemtricaValues"> <thead><strong>multiplierSemtricaValues</strong></thead> <tr> <td><strong>multiplierSemtricaValues</strong></td> <td id="">Value to apply</td> </tr> <tbody> <tr Semtrica='Apple'> <td>Apple</td> <td valueToCalc='Apple'>65</td> </tr> <tr Semtrica='Apricot'> <td>Apricot</td> <td valueToCalc='Apricot'>141</td> </tr> <tr Semtrica='Banana'> <td>Banana</td> <td valueToCalc='Banana'>100</td> </tr> <tr Semtrica='Bilberry'> <td>Bilberry</td> <td valueToCalc='Bilberry'>10.47</td> </tr> <tr Semtrica='Blackberry'> <td>Blackberry</td> <td valueToCalc='Blackberry'>312</td> </tr> <tr Semtrica='Blackcurrant'> <td>Blackcurrant</td> <td valueToCalc='Blackcurrant'>292</td> </tr> <tr Semtrica='Blueberry'> <td>Blueberry</td> <td valueToCalc='Blueberry'>32</td> </tr> <tr Semtrica='Boysenberry'> <td>Boysenberry</td> <td valueToCalc='Boysenberry'>50</td> </tr> <tr Semtrica='Cherry'> <td>Cherry</td> <td valueToCalc='Cherry'>100</td> </tr> <tr Semtrica='Cherry'> <td>Cherry</td> <td valueToCalc='Cherry'>50</td> </tr> </tbody> </table> </div>