2011-08-26 21 views
6

javascript kullanarak unitprice dizisiyle doldurulan değerleri nasıl toplayabilirim İşte benim html'm.Javascript Dizi Toplam

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

Kimlikler ** benzersiz olmalıdır **! (ve evet, yapabilirsiniz) –

+0

"id" öznitelikleri yerine 'class' niteliklerini kullanın. (Sayfada aynı kimliğe sahip birden fazla öğeye sahip olamazsınız.) –

+0

Tamam, kimlikleri benzersiz yaparsam daha sonra nasıl yapabilirim? Lütfen un birim fiyatının yeni satır ekle'ye tıklamam gibi dinamik olduğunu ve başka bir birim fiyat oluşturduğunu unutmayın. Yani onların toplamına ihtiyacım var. – Faizan

cevap

5
(benzersiz olmalıdır id) class yerine id kullanmak için HTML değiştirin

:

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

Sonra JavaScript ile toplam yapabilirsiniz (jQuery .each() fonksiyonu):

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

Çok iyi çalıştı! Teşekkürler – Faizan

+12

'var toplam = arr.reduce (işlev (a, b) {return a + b;}, 0);' jQuery öğesinden() daha hızlıdır. – Riking

+0

Veya daha da kısal 'var toplam = küçült ((a, b) => a + b, 0);' – evgpisarchik

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

Ayrıca 'for' döngüsünü de (i = ups.length; i -;)' –

+0

@Felix Yea olarak yazabilirsiniz. Bu çok daha temizdir. Neden böyle yaptığımı bilmiyorum haha ​​ – Paulpro

0

<input> s benzersiz ids li verin ke bu: Bir dizide bir değerler elde edebilirsiniz Eğer

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

, bunları toplamak jQuery kullanmak zorunda değilsiniz:

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

Sonra toplamını hesaplamak. İşi yapmak için dizi nesnesinde hali hazırda bulunan yöntemleri kullanabilirsiniz.

Diziler, bir .reduce() yöntemine sahiptir. Belgeleri: Array.reduce bir akümülatör geri arama olarak hareket eden bir değişken olarak bir işlevi kabul https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/Reduce

. Akümülatör fonksiyonu 4 argümanı (önceki Değer, currentValue, index, array) kabul eder. Sadece toplamı 2'ye ihtiyacın var. Bu 2 argüman öncekiValue ve currentValue'dir.

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

hedef ortamı bağlantılı MDN maddede tanımlanan prototip tanımı, ECMAScript 5 veya yukarıdaki eklemeler desteklemek kullanmayan bir uyumluluk sorunu ile karşı karşıya iseniz. (Aşağıya)

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

Ne için soruyordum. OP'nin orijinal başlığı biraz yanıltıcıdır. – frostymarvelous

+0

Bu cevap çok daha fazla tanınmayı hak ediyor. Teşekkürler derenard. – backdesk

+1

lambda kullanın: var toplam = sampleArray.reduce ((e, i) => e + i) ' – aloisdg