2013-06-06 7 views
2

Salut j'utilise this table pour calculer la somme.je dois faire est que je veux prendre l'entrée des zones de texte ci-dessous r1, r2, r3, et calculer la somme des cases ci-dessous par exemple: - totalcost= r1.value*5+r2.value*6+r3.value*5 comme ça il doit arriver pour chaque valeur de ligne surclic .... comment puis-je faire cela?Comment calculer la somme pour plusieurs lignes?

ici nous mon 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> 

Répondre

3

je partirais avec quelque chose le long de ces lignes:

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: oublièrent les valeurs multiplicateur

2

Ajouter une classe css à tous vos champs de saisie. alors vous pouvez parcourir toutes les zones de texte qui ont la même classe css pour obtenir leurs valeurs et les additionner.

quelque chose comme ceci:

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

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

}); 

ici est la quantité classe css sur tous vos champs de saisie.

Vous aurez besoin de Jquery pour exécuter le script ci-dessus. ou si vous ne voulez pas utiliser Jquery je pense que this link peut vous aider à obtenir tous les éléments par le même nom de classe. et alors vous pouvez utiliser votre boucle for.

+0

Cette réponse suppose que jQuery est disponible (ce qui devrait être, mais malheureusement ce n'est pas) –

+0

Merci Jason pour l'amener dans mon avis. le message est mis à jour. –

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

hey je ne suis pas prêt pour écrire le code complet mais voici la partie principale

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 
} 

Eh bien, c'est moyen rapide de le faire

Questions connexes