Doing some calculations on html table using Javascript issue

Question

Hi i am trying to do the some calculations on HTML table using javascript code

but i am having issues getting percentage values

when i entered the below sample data i got this result

Quantity    Unit Price  Total   Percentage 

1            5          5       Infinity

2            5          10      2

3            5          15      1

Grand Total 30

as you can see percentage values are wrong

Percentage = Total / Grand Total

So percentage values should be like this

Percentage 

0.16

0.33

0.5

Javascript

    <script>
    $(document).ready(function () {
        $(".txtMult input").keyup(multInputs);

        function multInputs() {
            var mult = 0;
            // for each row:
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                var $Percentage = ($total / mult) * 100;
                $('.percentage', this).text($Percentage);
                $('.multTotal', this).text($total);
                mult += $total;
            });
            $("#grandTotal").text(mult);
        }
    });
</script>

HTML

 <table>
  <tr>
    <th>Quantity    
    </th>
    <th>Unit Price
    </th>
    <th>Total
    </th>
    <th>Percentage
    </th>
  </tr>
  <tr class="txtMult">
    <td>
      <input name="txtbox1" class="val1" />
    </td>
    <td>
      <input name="txtbox2" class="val2" />
    </td>
    <td>
      <span class="multTotal">0.00</span>
    </td>
    <td>
      <span class="percentage">0</span>
    </td>
  </tr>
  <tr class="txtMult">
    <td>
      <input name="txtbox1" class="val1" />
    </td>
    <td>
      <input name="txtbox2" class="val2" />
    </td>
    <td>
      <span class="multTotal">0.00</span>
    </td>
    <td>
      <span class="percentage">0</span>
    </td>
  </tr>
  <tr class="txtMult">
    <td>
      <input name="txtbox" class="val1" />
    </td>
    <td>
      <input name="txtbox" class="val2" />
    </td>
    <td>
      <span class="multTotal">0.00</span>
    </td>
    <td>
      <span class="percentage">0</span>
    </td>
  </tr>
  <tr>
    <td colspan="3" ">Grand Total <span id="grandTotal">0.00</span>
    </td>
  </tr>
</table>

Your help is much appreciated

You divide by 0 because when it hits this line: var $Percentage = ($total / mult) * 100; the value of mult is 0 — Redmega
– Redmega, Commented Mar 28, 2016 at 22:51

Richard Hayes · Accepted Answer · 2016-03-28 23:21:08Z

1

Here is some working JS code that I tested in the fiddle:

    $(document).ready(function () {
        $(".txtMult input").keyup(multInputs);

        function multInputs() {

                var $mult = 0;            
            // calculate Grand total
             $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                $mult += $total;
            });

            // for each row:
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $val1 = $('.val1', this).val();
                var $val2 = $('.val2', this).val();
                var $total = ($val1) * ($val2);
                var $Percentage = (($total / $mult)).toFixed(2);
                $('.percentage', this).text($Percentage);
                $('.multTotal', this).text($total);
            });
            $("#grandTotal").text($mult);
        }
    });

I calculated the grand total first then divided each row total by the grand total. Also, .toFixed(2) can be used to round to 2 decimal places if desired.

edited Mar 28, 2016 at 23:21

answered Mar 28, 2016 at 22:52

Richard Hayes

1551 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ayman Over a year ago

Hi thanks for the answer one small issue with the code it shows Grand Total 0.00 in label

Richard Hayes Over a year ago

Ya, I noticed. I updated the code in my answer above to include this line: $("#grandTotal").text($mult);

Collectives™ on Stack Overflow

Doing some calculations on html table using Javascript issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related