2. Algorithm
  3. javascript - How to auto calculate table rows using jquery? - Stack Overflow

javascript - How to auto calculate table rows using jquery? - Stack Overflow

admin2025-04-20  0

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 edited Dec 20, 2013 at 14:57 Jamiec 136k15 gold badges141 silver badges199 bronze badges asked Dec 20, 2013 at 14:51 EliEli 1,2765 gold badges32 silver badges63 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

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);
}
转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745105684a285276.html

javascriptHow to auto calculate table rows using jqueryStack Overflow

最新回复(0)