jqueryを使ってテーブルセルの値の合計を計算する

下記のような値のテーブルがあります。

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

私の仕事は有効な値(5、10、20)の合計を計算し、合計をセルに表示することです。私が試したコードは、

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

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

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

私が直面している問題は、私は正しい出力を得ていないということです。時々、テーブルセルは 'NA'の代わりに空の値を含みます。何が足りないのかわかりません。提案してください。

0

7 答え

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
追加された

確認するには isNaN を使用してください。セルに値が含まれている場合は、それを変換します。

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

注: "parseInt"を使用する場合は常に整数を返します。したがって、テーブルに10進値がある場合は Number(String)これは、数字のように見えるものすべてを変換しようとします...

1
追加された

追加する前に、td要素のtext/htmlを使用し、値をintegerに解析する必要があります。

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
追加された
@Evgeniy:tdコンテンツにはfloat値はありません。
追加された 著者 Milind Anantwar,
基数パラメータがない場合、インタープリタはデフォルトの動作にフォールバックします。デフォルトの動作では、数字がゼロ(8進数)または0x(16進数)で始まっていない限り、通常10進数として扱われます。たとえば、Firefox、Chrome、およびIE 9以降では、parseInt( "077")はparseInt( "077"、10)として扱われます。 IE8以下ではparseInt( "077"、8)として扱われます。そのため基数を常に指定する必要があります
追加された 著者 Milind Anantwar,
imho parseFloat より parseInt 、有効な数値はfloatであり、それは計算エラーを引き起こすかもしれません
追加された 著者 Evgeniy,
うん、例題の表はありませんが、それがprodに現れないことを確認することはできません。起こりうるバグを避けるために、 parseFloat を使うのは意味があります
追加された 著者 Evgeniy,
ありがとう。今それを試してみましょう。
追加された 著者 user4635038,
10の使い方は? parseInt($(this).text()、10)にあります。どうか明らかにしてください。
追加された 著者 user4635038,

あなたのコードが問題なく動いているのはあなたが合計を連結しているのでUse parseInt()関数は文字列を解析して整数を返します。

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

構文

parseInt(string, radix);

パラメーター

文字列

解析する値stringが文字列ではない場合、それはに変換されます   1。文字列の先頭の空白は無視されます。

基数

基数(基数)を表す2から36までの整数   上記の文字列の数値システム)指定する   人間が一般的に使用する10進数表記の10です。常に   読者の混乱を避け、保証するためにこのパラメーターを指定してください   予測可能な動作異なる実装は異なる生成   基数が指定されていない場合に発生します。

0
追加された
$(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
追加された

jqyeryを使用してすべてのtdsを取得し、jqueryの各関数を使用してすべてのtdsをループ処理してから、isNaNを使用して現在のtdに数値が含まれているかどうかを確認します。もしそうなら、合計にその値を合計します。

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

JSFiddle

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript