根据跨度元素计算总计

时间:2019-03-18 17:00:36

标签: javascript jquery

我更改了跨度值,因此我需要获得跨度的总计。我为输入字段指定了一个名为“ sumDiv” 的顶级div ID 我的Span也有这样的“名称”属性

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, e.g. "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>

2 个答案:

答案 0 :(得分:0)

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

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

与此

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

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

答案 1 :(得分:0)

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

在准备好文档时,没有值或跨度,因此,当您尝试获取值时,将只获取空值,该值将转换为0,结果为0。

更改输入时,将填充字段并运行处理程序,以便在输入框旁边获取结果。您的原始代码在.children上使用了#sumDiv,但是这无法正常工作,因为范围不是该div的子代。

我将其更改为

$(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, e.g. "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>