Question

198

How to auto calculate table rows using jquery?

rated 0 times [ 199] [ 1] / answers: 1 / hits: 5863 / 11 Years ago, fri, december 20, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alessandrol

Add To Favorites

Follow

Total Points: 286

Total Questions: 107

Total Answers: 109

Location: Uzbekistan

Member since Sat, Feb 27, 2021

3 Years ago

answered 11 Years ago danar · Accepted Answer

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.net or jsbin.com 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.