Javascript数组总和

时间:2011-08-26 10:59:57

标签: javascript

如何使用javascript总结unitprice数组中填充的值 这是我的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>

5 个答案:

答案 0 :(得分:38)

如果可以获取数组中的值,则不必使用jQuery对它们求和。您可以使用数组对象上已存在的方法来完成工作。

数组有一个.reduce()方法。 文档: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/Reduce

Array.reduce接受一个函数作为充当累加器回调的参数。累加器函数接受4个参数(previousValue,currentValue,index,array)。你只需要其中两个来总和。这两个参数是previousValue和currentValue。

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

如果您遇到目标环境不支持ECMAScript 5或更高版本的兼容性问题,请使用链接的MDN文章中定义的原型定义。 (见下文)

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

答案 1 :(得分:5)

将您的HTML更改为使用class而不是idid必须是唯一的):

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

然后你可以通过JavaScript(使用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
  });

答案 2 :(得分: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;
}

答案 3 :(得分:0)

像这样提供<input>个唯一ID:

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

然后计算总和:

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

答案 4 :(得分:0)

// array这是您的数组输入vlaue array.push(input.val())

function array_sum(array){
    var sum = 0;
   for(var i = 0; i < array.length; i++){
        sum += parseInt(array[i]);
    }
    return sum;
}