How to Calculate the subtotal of a Dynamic table rows?

Question

I have dynamic table which looks like this

Sl no : Item Desc. : Qty. : Price : Available Qty. : Sub Total : Actions:

I want the subtotal for each to be calculate as soon as the quantity and price is entered in each row.. using jQuery or Javascript.

<table id="options-table" class="table table-striped table-bordered bootstrap-datatable datatable">
    <tr>
            <td>Sl no :</td>
            <td><i class="icon-pencil"></i> 
                Item Desc. :
            </td>
            <td><i class="icon-signal"></i>
                Qty. :
            </td>
            <td><i class="icon-tag"></i> 
                Price :
            </td>
            <td><i class="icon-signal"></i> 
                Available Qty. :
            </td>
            <td><i class="icon-th"></i> 
                Sub Total :
            </td>
            <td><i class="icon-chevron-down"></i> 
                Actions:
            </td>
    </tr>
    <tr>
        <td>1&nbsp;</td>
        <td><input type="text"   id="itemname[]"    name="itemname[]" value="" style="width:200px;" onchange="updateQuotation();"/></td>
        <td><input type="text"   id="qty[]"         name="qty[]" value="" style="width:50px;" onKeyUp="updateQuotation(this.id);"/></td>
        <td><input type="text"   id="price[]"       name="price[]" value="" style="width:50px;" onKeyUp="updateQuotation(this.id);"/></td>
        <td><input type="text"   id="availableqty[]"name="availableqty[]" value="" style="width:50px;" onchange="updateQuotation();"/></td>
        <td><input type="text"   id="total[]"       name="subtotal[]" value="" style="width:50px;" onchange="updateQuotation();"/></td>                                 
        <td><input type="button" class='del' value='Delete' /></td>
    </tr>                  
    <tr>
        <td>2&nbsp;</td>
        <td><input type="text"   id="itemname[]"    name="itemname[]" value="" style="width:200px;" onchange="updateQuotation();"/></td>
        <td><input type="text"   id="qty[]"         name="qty[]" value="" style="width:50px;" onKeyUp="updateQuotation(this.id);"/></td>
        <td><input type="text"   id="price[]"       name="price[]" value="" style="width:50px;" onKeyUp="updateQuotation(this.id);"/></td>
        <td><input type="text"   id="availableqty[]"name="availableqty[]" value="" style="width:50px;" onchange="updateQuotation();"/></td>
        <td><input type="text"   id="total[]"       name="subtotal[]" value="" style="width:50px;" onchange="updateQuotation();"/></td>
        <td><input type="button" class="add" value="Add More" /></td>
    </tr>
</table>

where do you want to show the subtotals – Arun P Johny Apr 30 '13 at 09:36 — Arun P Johny, Apr 30 '13 at 09:36

score 1 · Answer 1 · answered Apr 30 '13 at 09:39

use this below jquery code to get then subtotal row wise

function updateQuotation(id) {
           var qty =  Number($(id).closest("tr").find("input[id*='qty']").val());
           var price = Number($(id).closest("tr").find("input[id*='price']").val());
           $(id).closest("tr").find("input[id*='total']").val(qty * price);
           return false;
        }

and on onkeyup event only sent this as a parameter to the function

 onKeyUp="updateQuotation(this);"

and not this.id

score 0 · Accepted Answer · answered Apr 30 '13 at 09:37

you need to set the id as unique id for the fields.

<script type="text/javascript">
function updateQuotation(id)
{
    var price = $("#qty_"+id).val()*$("#price_"+id).val();
    $("#total_"+id).val(price);
}
</script>

and modified the code as

<tr>
                        <td>1&nbsp;</td>
                        <td><input type="text"   id="itemname[]"    name="itemname[]" value="" style="width:200px;" onchange="updateQuotation();"/></td>
                        <td><input type="text"   id="qty_1"         name="qty[]" value="" style="width:50px;" onKeyUp="updateQuotation(1);"/></td>
                        <td><input type="text"   id="price_1"       name="price[]" value="" style="width:50px;" onKeyUp="updateQuotation(1);"/></td>
                        <td><input type="text"   id="availableqty_1"name="availableqty[]" value="" style="width:50px;" onchange="updateQuotation(1);"/></td>
                        <td><input type="text"   id="total_1"       name="subtotal[]" value="" style="width:50px;" onchange="updateQuotation(1);"/></td>                                 
                        <td><input type="button" class='del' value='Delete' /></td>
                    </tr>                  
                    <tr>
                        <td>2&nbsp;</td>
                        <td><input type="text"   id="itemname[]"    name="itemname[]" value="" style="width:200px;" onchange="updateQuotation();"/></td>
                        <td><input type="text"   id="qty_2"         name="qty[]" value="" style="width:50px;" onKeyUp="updateQuotation(2);"/></td>
                        <td><input type="text"   id="price_2"       name="price[]" value="" style="width:50px;" onKeyUp="updateQuotation(2);"/></td>
                        <td><input type="text"   id="availableqty_2"name="availableqty[]" value="" style="width:50px;" onchange="updateQuotation(2);"/></td>
                        <td><input type="text"   id="total_2"       name="subtotal[]" value="" style="width:50px;" onchange="updateQuotation(2);"/></td>
                        <td><input type="button" class="add" value="Add More" /></td>
                    </tr>

I think this will help you to calculate the sub total. for giving example i have provide the code for calculating sub total by multiply the qty and the price value.

How to Calculate the subtotal of a Dynamic table rows?

2 Answers2