I have a table with 3 table rows, each row contains 5 columns with input text boxes, the last column is for the total of the values inputted in the 4 columns. I want to calculate the total automatically using jquery or javascript after the 4 columns was filled with values. How could I do this? Here is my table code.

Table

<table name="tbl_a" id="tbl_a">
<tr>
    <td><span style="margin-left:30px;">a. Provision of  certified seeds</span></td>
    <td>no. of bags</td>
    <td>per AT</td>
    <td><input type="text" class="form-control" name="at[a]" id="a" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[b]" id="b" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[c]" id="c" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[d]" id="d" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[total_1]" id="total_1" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
    <td></td>
    <td>no. of farmers</td>
    <td></td>
    <td><input type="text" class="form-control" name="at[e]" id="e" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[f]" id="f" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[g]" id="g" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[h]" id="h" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[total_2]" id="total_2" value=""  value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
    <td style="text-align:center;">Rehab Seeds</td>
    <td>no. of bags</td>
    <td>per AT</td>
    <td><input type="text" class="form-control" name="at[i]" id="i" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[j]" id="j" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[k]" id="k" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[l]" id="l" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[total_3]" id="total_3" value="" value="" placeholder="total"  style= "width:160px;"/></td>
</tr>
</table>

I have a table with 3 table rows, each row contains 5 columns with input text boxes, the last column is for the total of the values inputted in the 4 columns. I want to calculate the total automatically using jquery or javascript after the 4 columns was filled with values. How could I do this? Here is my table code.

Table

<table name="tbl_a" id="tbl_a">
<tr>
    <td><span style="margin-left:30px;">a. Provision of  certified seeds</span></td>
    <td>no. of bags</td>
    <td>per AT</td>
    <td><input type="text" class="form-control" name="at[a]" id="a" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[b]" id="b" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[c]" id="c" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[d]" id="d" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[total_1]" id="total_1" value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
    <td></td>
    <td>no. of farmers</td>
    <td></td>
    <td><input type="text" class="form-control" name="at[e]" id="e" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[f]" id="f" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[g]" id="g" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[h]" id="h" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[total_2]" id="total_2" value=""  value="" placeholder="total" style= "width:160px;"/></td>
</tr>
<tr>
    <td style="text-align:center;">Rehab Seeds</td>
    <td>no. of bags</td>
    <td>per AT</td>
    <td><input type="text" class="form-control" name="at[i]" id="i" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[j]" id="j" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[k]" id="k" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[l]" id="l" value=""  style= "width:160px;"/></td>
    <td><input type="text" class="form-control" name="at[total_3]" id="total_3" value="" value="" placeholder="total"  style= "width:160px;"/></td>
</tr>
</table>

• javascript
• jquery

Share Improve this question Follow edited Dec 20, 2013 at 14:57 Jamiec 136k1515 gold badges141141 silver badges199199 bronze badges asked Dec 20, 2013 at 14:51 EliEli 1,27655 gold badges3232 silver badges6363 bronze badges 3

• 9 Have you tried anything? – Jamiec Commented Dec 20, 2013 at 14:58
• By reading jQuery documentation first. – Virus721 Commented Dec 20, 2013 at 15:02
• Google is your friend. – Steve Wellens Commented Dec 20, 2013 at 15:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

First of all please google for what you wanted to achieve, learn yourself, try to find the solution. If you still not succeeded, ask question with the relevant code that you have tried and with some playgrounds such as jsfiddle or jsbin. etc.

However, here is the script which I used. I added total to the last input field.

$(function () {
    var tbl = $('#tbl_a');
    tbl.find('tr').each(function () {
        $(this).find('input[type=text]').bind("keyup", function () {
            calculateSum();
        });
    });

    function calculateSum() {
        var tbl = $('#tbl_a');
        tbl.find('tr').each(function () {
            var sum = 0;
            $(this).find('input[type=text]').not('.total').each(function () {
                if (!isNaN(this.value) && this.value.length != 0) {
                    sum += parseFloat(this.value);
                }
            });

            $(this).find('.total').val(sum.toFixed(2));
        });
    }
});

Here is the result. In this script, you can have any number of rows, but the last row needed to have a different class name otherwise its value also added to the total.

On input change, calculate inputs's total. If one input is empty return, if not assign total to last input of tr.

$(".form-control").change(function(){
   var tr = $(this).parents("tr");
   var total = 0;
   for (var i = 0; i < tr.find("input").length; i++) {
       if ($(tr).find("input").eq(i).val() == 0 || $(tr).find("input").eq(i).val() == "")
          return;
       total += parseInt($(tr).find("input").eq(i).val());
   }

   $(tr).find("input").eq($(tr).find("input").length-1).val(total);
}