How to calculate sum for multiple rows?

Question

Hi i am using this table to calculate the sum.what i have to do is i want to take input from textboxes below r1,r2,r3, and calculate the sum from boxes below for example:- totalcost= r1.value*5+r2.value*6+r3.value*5 like this it has to happen for each row values onclick....how can i do this?

here us my code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function updatesum() {
var totalFields = document.input.time.length;
for(var i=0; i <= totalFields; i++){
    document.input.total[i].value = ( document.input.time[i].value * document.input.cost[i].value);
}
return false; 
}
</script>

<style>
input {
    float: right;
}
</style>
</head>
<body>
<form name="input" action="#" method="post" onsubmit="return false;">
<table border="1">
<tr><th>Sl.no</th><th>id</th><th>title</th><th>R1<br><input type="text" name="cost" value=" "></th><th>R2<br><input type="text" name="cost" value=" "></th><th>R3<br><input type="text" name="cost" value=" "></th><th>Total Cost</th></tr>
<tr><td>1</td><td>1.1</td><td>task1</td><td><input type="text" name="time" value="5" disabled></td><td><input type="text" name="time" value="6" disabled></td><td><input type="text" name="time" value="5" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td>2</td><td>1.2</td><td>task1</td><td><input type="text" name="time" value="7" disabled></td><td><input type="text" name="time" value="8" disabled></td><td><input type="text" name="time" value="2" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td>3</td><td>1.4</td><td>task1</td><td><input type="text" name="time" value="9" disabled></td><td><input type="text" name="time" value="4" disabled></td><td><input type="text" name="time" value="7" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td colspan="7"><input type="submit" value="submit" name="submit" onclick="updatesum()"></td></tr>
</table>
</form>
</body>
</html>

Py. · Accepted Answer · 2013-06-06T07:51:55.260

I'd go with something along those lines:

var i, j, k, sum, tdlist,
    trlist = document.getElementsByTagName("tr"),
    multipliers = [5, 6, 5];
//start with 1 to ignore first line
for (i=1; i < trlist.length; i++) {
    tdlist = trlist[i].childNodes;
    sum = 0;
    k = 0;
    //j start with the fourth td and stop before the last one
    for (j=3; j < tdlist.length-1; j++) {
        sum += parseInt(tdlist[j].firstChild.value, 10) * multipliers[k];
        k++;
    }
    // Set the last element value
    trlist[i].lastChild.firstChild.value = sum;
}

EDIT : forgot the multiplier values

score 2 · Answer 2 · edited May 23 '17 at 10:27

2

Add a css class to all your textboxes. then you can loop through all the textboxes which have same css class to get their values and sum them.

something like this:

 var sum = 0;
 $(".amount").each(function (i) {
    var val = $(this).val();
    if (val != "") {

        sum = sum+ parseFloat(val);
    }
    else {
        sum = sum+ 0;
    }

});

here amount is the css class on all your textboxes.

You will need Jquery to run above script. or if you don't want to use Jquery I think this link can help you to get all elements by same class name. and then you can use your for loop.

edited May 23 '17 at 10:27

Community

1
1

answered Jun 06 '13 at 07:12

muhammad kashif

2,566
3
26
49

This answers assumes that jQuery is available (which it should be, but unfortunately it is not) – Jason Sperske Jun 06 '13 at 07:18
Thanks Jason to bring it into my notice. post is updated. – muhammad kashif Jun 06 '13 at 07:21

score 0 · Answer 3 · edited Jun 06 '13 at 07:28

    <table class="tableclass" border="1">
<tr><th>Sl.no</th><th>id</th><th>title</th><th>R1<br><input type="text" name="cost" value=" "></th><th>R2<br><input type="text" name="cost" value=" "></th><th>R3<br><input type="text" name="cost" value=" "></th><th>Total Cost</th></tr>
<tr><td>1</td><td>1.1</td><td>task1</td><td><input type="text" name="time" value="5" disabled></td><td><input type="text" name="time" value="6" disabled></td><td><input type="text" name="time" value="5" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td>2</td><td>1.2</td><td>task1</td><td><input type="text" name="time" value="7" disabled></td><td><input type="text" name="time" value="8" disabled></td><td><input type="text" name="time" value="2" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td>3</td><td>1.4</td><td>task1</td><td><input type="text" name="time" value="9" disabled></td><td><input type="text" name="time" value="4" disabled></td><td><input type="text" name="time" value="7" disabled></td><td><input type="text" name="cost" value=" " disabled></td></tr>
<tr><td colspan="7"><input type="submit" value="submit" name="submit" onclick="updatesum()"></td></tr>
</table>

//JQUERY CODE

 rowElements = $(".tableClass > tr");
    $.each(rowElements , function(){
    currentObj = $(this);
    allInputTypesRow = currentObj.find("input");
    r1 = allInputTypesRow.eq(0).val();
    r2 = allInputTypesRow.eq(1).val();
    r3 = allInputTypesRow.eq(2).val();
    //Your formula to calculate
    //Set the value in the last cell
    });

chetan mehta · Answer 4 · 2013-06-06T07:56:23.950

0

hey I am not willing to write complete code but heres the main part

var x=document.getElementsByTagName("input"); //x object created with property Length
for(var i=0;i<=2;i++)
{
x[i].value=(x[i+3].value*5)+(x[i+7].value*5)+(x[i+11].value*5);  //r1*5+r2*6+r3*5
}

Well this is fast way to do it

edited Jun 06 '13 at 07:56

answered Jun 06 '13 at 07:43

chetan mehta

369
1
3
13

How to calculate sum for multiple rows?

4 Answers4