Javascript Array Sum

Question

Comment je peux résumer les valeurs remplies dans le tableau de prix unitaires en utilisant javascript Voici mon html.

<td> 
     <input type="text" style="width: 60px; background: none repeat scroll 0% 0% rgb(255, 255, 255);" maxlength="4" id="unitprice" name="unitprice[]"> 
    </td> 
    <td> 
     <input type="text" style="width: 60px; background: none repeat scroll 0% 0% rgb(255, 255, 255);" maxlength="4" id="unitprice" name="unitprice[]"> 
    </td> 

Answer 1

Changer votre code HTML à utiliser class au lieu de id (id doit être unique):

<td> 
    <input type="text" 
     style="width: 60px; background: none repeat scroll 0% 0% rgb(255, 255, 255);" maxlength="4" 
     class="unitprice" name="unitprice[]"> 
</td> 
<td> 
    <input type="text" 
     style="width: 60px; background: none repeat scroll 0% 0% rgb(255, 255, 255);" 
      maxlength="4" class="unitprice" name="unitprice[]"> 
</td> 

Ensuite, vous pouvez au total via JavaScript (en utilisant la fonction jQuery .each()):

var totalUnitPrice = 0; 

$('.unitprice').each(function(index) { 
    totalUnitPrice += parseInt($(this).val()); // parse the value to an Integer (otherwise it'll be concatenated as string) or use parseFloat for decimals 
    }); 

Answer 2

function getSum(){ 
    var ups = document.getElementsByName('unitprice[]'), sum = 0, i; 
    for(i = ups.length; i--;) 
     if(ups[i].value) 
      sum += parseInt(ups[i].value, 10); 
    return sum; 
} 

Answer 3

Donnez votre <input> s id uniques li ke ceci:

<input type="text" id="unitprice_1"> 
<input type="text" id="unitprice_2"> 
<input type="text" id="unitprice_3"> 

calcule ensuite la somme:

var i = 1; 
var sum = 0; 
var input; 
while((input = document.getElementById('unitprice_'+i)) !== null) { 
    sum += parseInt(input.value); 
    ++i; 
} 
alert(sum); 

Answer 4

Si vous pouvez obtenir les valeurs dans un tableau, vous ne devez pas utiliser jQuery pour les résumer. Vous pouvez utiliser les méthodes déjà présentes sur l'objet tableau pour effectuer le travail.

Les tableaux ont une méthode .reduce(). Documentation: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/Reduce

Array.reduce accepte une fonction comme un argument qui agit comme un rappel de l'accumulateur. La fonction accumulateur accepte 4 arguments (previousValue, currentValue, index, array). Vous avez seulement besoin de 2 d'entre eux pour faire la somme. Ces 2 arguments sont previousValue et currentValue.

var sampleArray = [1, 2, 3, 4, 5]; 
var sum = sampleArray.reduce(function(previousValue, currentValue){ 
    return currentValue + previousValue; 
}); 

Si vous êtes confronté à un problème de compatibilité où l'environnement cible ne supporte pas ECMAScript 5 ou ajouts ci-dessus, utilisez la définition de prototype défini dans l'article lié MDN. (Ci-dessous)

if (!Array.prototype.reduce) { 
    Array.prototype.reduce = function reduce(accumulator){ 
    if (this===null || this===undefined) throw new TypeError("Object is null or undefined"); 
    var i = 0, l = this.length >> 0, curr; 
    if(typeof accumulator !== "function") // ES5 : "If IsCallable(callbackfn) is false, throw a TypeError exception." 
     throw new TypeError("First argument is not callable"); 
    if(arguments.length < 2) { 
     if (l === 0) throw new TypeError("Array length is 0 and no second argument"); 
     curr = this[0]; 
     i = 1; // start accumulating at the second element 
    } 
    else 
     curr = arguments[1]; 
    while (i < l) { 
     if(i in this) curr = accumulator.call(undefined, curr, this[i], i, this); 
     ++i; 
    } 
    return curr; 
    }; 
}