Home/ Questions/Q 9151755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T11:52:48+00:00

I want to create a table that can auto calculate some values for each

  • 0

I want to create a table that can auto calculate some values for each fields for each rows. I found these jquery calculator, I would like to ask how am I going to use it incase I’ll be using jstl forEach, how can I use this so I would it can auto calculate what ever user entered on a field for each rows.. Thanks..

<html>
    <head>
       <script type="text/javascript"  src="js/jquery-latest.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
                          $(document).ready(function()
                        {
                            $('input').change(function()
                            {
                                var ProductUnitVal = parseInt($('#product-unit-val').val());
                                var TotalUnitSales = parseInt($('#total-unit-sales').val());

                                var answer = ProductUnitVal * TotalUnitSales;

                                $('#sales-val').html('$' + answer);
                            });
                        });
           </script>
    </head>
    <body>       

        Unit Value <input type="text" id="product-unit-val" /><br />
        Unit Sales <input type="text" id="total-unit-sales" /><br />
        <span id="sales-val"></span>

    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Make it row based. When an input changes, look for the closest row (tr) which finds the scope of the elements. Then search just that scope (i.e. the row) for the various elements. Note, I changed from id to class for the 3 items.

    <table id="thetable">
<tr>
<td>
Unit Value <input type="text" class="product-unit-val" />
</td>
<td>
Unit Sales <input type="text" class="total-unit-sales" />
</td>
<td><span class="sales-val"></span></td>
</tr>
</table>

    And then your script:

                        $(document).ready(function()
                    {
                        $('#thetable input').change(function()
                        {
                            var $row = $(this).closest('tr');

                            var ProductUnitVal = parseInt($row.find('.product-unit-val').val());
                            var TotalUnitSales = parseInt($row.find('.total-unit-sales').val());

                            var answer = ProductUnitVal * TotalUnitSales;

                            $row.find('.sales-val').html('$' + answer);
                        });
                    });
    • 0