Jquery kullanarak tablo hücrelerinde toplam değerlerin hesaplanması

Aşağıda gösterilen değerlere sahip bir masam var.

<table>
    <tbody>
        <tr>
            <td class='price'>5</td>
        </tr>
        <tr>
            <td class='price'>NA</td>
        </tr>
        <tr>
            <td class='price'>10</td>
        </tr>
        <tr>
            <td class='price'>NA</td>
        </tr>
        <tr>
            <td class='price'>20</td>
        </tr>
        <tr>
            <td class='total'></td>
        </tr>
    </tbody>
</table>

Görevim geçerli değerlerin toplamını (5, 10 ve 20) hesaplamak ve toplamı toplam hücrede görüntülemek. Çalıştığım kod

var prices = $('.price'),
    total = 0;

$.each(prices, function(i, price) {
    if (price != 'NA') {
         total = total + price;
    }
});

$('.total').text(total);

Karşılaştığım sorun şu ki, doğru çıktıyı alamıyorum. Bazen, tablo hücresi 'NA' yerine boş değer içeriyor. Ne eksik olduğumdan emin değilim. Lütfen önerin.

0

7 cevap

Created a fiddle for you... Fiddle

var total = 0;
$(".price").each(function (i, price) {
    var price = $(this).text();

    if (price != 'NA') {
        total = total + parseInt(price);
    }

    $('.total').text(total);

});
1
katma

Kontrol etmek için isNaN adresini kullanın. hücre bir değer içeriyorsa dönüştürün:

$.each(prices, function(i, price){
if (!isNaN($(this).text())){
     total = total + Number($(this).text());
}});

Not: Eğer "parseInt" kullanıyorsanız her zaman bir tamsayı döndürür - böylece tabloda ondalık değerleriniz varsa Number (String) , bir sayıya benzeyen her şeyi dönüştürmeyi deneyecek ...

1
katma

Td öğesinin text/html dosyasını kullanmanız ve eklemeyi yapmadan önce tamsayı için değeri ayrıştırmanız gerekir:

var prices = $('.price');
var total = 0;
 $.each(prices, function(i, price){
  var pc=$(this).text();  
  if (pc!= 'NA'){
       total = total + parseInt(pc,10);
  }});
$('.total').text(total);
0
katma
@Evgeniy: td içeriğinde kayan değer yoktur.
katma yazar Milind Anantwar, kaynak
Radix parametresi yoksa, yorumlayıcı, sıfır (sekizlik) veya 0x (onaltılık) ile başlamazlarsa, normalde sayıları ondalık olarak ele alan varsayılan davranışa geri döner. örneğin, Firefox, Chrome ve IE 9+ ayrıştırıcıya ("077") ayrıştırıcı ("077", 10) davranır. IE8 ve altı onu ayrıştırıcı olarak kabul ediyor ("077", 8) Bu yüzden her zaman yarıçapı belirtmelisiniz
katma yazar Milind Anantwar, kaynak
imho parseFloat daha iyi parseInt 'dan sonra, geçerli sayı değişken olabilir ve hesaplamada hataya neden olabilir
katma yazar Evgeniy, kaynak
evet, örneklenmiş tabloda yok, ancak prod görünmeyeceğinden emin olamazsınız. Sadece olası hatalardan kaçınmak için parseFloat 'ı kullanmak mantıklıdır.
katma yazar Evgeniy, kaynak
Teşekkürler. Bunu şimdi deneyeyim.
katma yazar user4635038, kaynak
10'un kullanımı nedir? parseInt ($ (this) .text (), 10) içinde. Lütfen açıkla.
katma yazar user4635038, kaynak

Kodunuz iyi çalışıyor, bu yüzden toplamı birleştiriyorsunuz, bu nedenle parseInt() işlevini kullanın bir dize ayrıştırır ve bir tamsayı döndürür.

parseInt($(this).text() , 10);

Sözdizimi

parseInt(string, radix);

Parametreler

dize

Ayrıştırılacak değer. Dize bir dize değilse, o zaman dönüştürülür.   bir. Dizedeki lider boşluklar yoksayılır.

sayı tabanı

Yarıçapı temsil eden 2 ile 36 arasında bir tam sayı (   yukarıda belirtilen dizgenin matematiksel sayı sistemleri). belirtmek   10 insanlar tarafından yaygın olarak kullanılan ondalık sayı sistemi için. Her zaman   Okuyucu karmaşasını ortadan kaldırmak ve garanti altına almak için bu parametreyi belirtin   öngörülebilir davranış. Farklı uygulamalar farklı üretir   sayı tabanı belirtilmediğinde sonuç alınır.

0
katma
$(document).ready(function(){
var prices = $('.price');
var total = 0;
$.each(prices, function(i, price)
{
    var val=$(this).text();
    if (val!="NA" && val!="")
       {
         total = total + parseInt(val);
       }
});

$('.total').text(total);
});

Here is the Fiddle

0
katma

JQyery kullanarak tüm tds alın, her işlevi jQuery kullanarak tüm tds arasında döngü, sonra geçerli td isNaN kullanarak bir sayı içerip içermediğini kontrol edin. Eğer öyleyse, bu değeri toplamı toplayın.

var sum = 0, elText;
$('.price').each(function (index, element) { 
    elText = element.innerText;
    isNaN(elText) || (sum += parseInt(elText));
});
$('.total').text(sum);

JSFiddle

0
katma