如何計算多行的總和？

嗨，我使用this table來計算總和。我要做的是我想從下面的文本框輸入r1，r2，r3，並計算從下面的框中的總和，例如： - totalcost= r1.value*5+r2.value*6+r3.value*5像這樣它必須發生每一行值onclick ....我怎麼能這樣做？如何計算多行的總和？

我們在這裏我的代碼：

<!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>

來源

2013-06-06 milano

我會去用類似的規定：

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; 
}

編輯：忘了乘數值

來源

2013-06-06 07:20:08

添加CSS類所有文本框。那麼你可以遍歷所有具有相同css類的文本框來獲取它們的值並對它們進行求和。

是這樣的：

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

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

});

這裏量在所有的文本框的CSS類。

您將需要Jquery在腳本之上運行。或者如果您不想使用Jquery，我認爲this link可以幫助您獲取相同類名的所有元素。然後你可以使用你的for循環。

來源

2013-06-06 07:12:56

這個答案快速的方法假設jQuery是可用的（這是應該的，但不幸的是它不是） –

感謝傑森把它變成了我的注意。帖子已更新。 –

<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代碼

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 
    });

來源

2013-06-06 07:23:12

嘿，我不甘心編寫完整的代碼，但繼承人的主要部分

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 
}

嗯，這是做

來源

2013-06-06 07:43:27

如何計算多行的總和？

回答

相關問題