2016-12-05 3 views
0

私のスクリプトでは、1列あたりの合計値を取得するテーブルがあります。 私が達成したいのは、数字をコンマで表示することです。ここで数字をコンマでフォーマットし、合計値を取得

は、これまでのところ、私が持っているものである

HTML

<table> 
<thead> 
     <tr>  
      <th>COL1</th> 
      <th>COL2</th> 
      <th>COL3</th> 
     </tr> 
</thead> 


<tbody> 
<tr> 
    <td><input type="text" class="num1" name="num1" value="1200.00" /></td> 
    <td><input type="text" class="num2" name="num2" value="500.00" /></td> 
    <td><input type="text" class="num3" name="num3" value="100.00" /></td> 
</tr> 

<tr> 
    <td><input type="text" class="num1" name="num1" value="900.00" /></td> 
    <td><input type="text" class="num2" name="num2" value="1500.00" /></td> 
    <td><input type="text" class="num3" name="num3" value="10.00" /></td> 
</tr> 

<tr> 
    <td><input type="text" class="num1" name="num1" value="200.00" /></td> 
    <td><input type="text" class="num2" name="num2" value="500.00" /></td> 
    <td><input type="text" class="num3" name="num3" value="300.00" /></td> 
</tr> 


<tr> 
    <td><input type="text" class="tot1" name="tot1" value="" /></td> 
    <td><input type="text" class="tot2" name="tot2" value="" /></td> 
    <td><input type="text" class="tot3" name="tot3" value="" /></td> 
</tr> 
<tr> 

</tr> 
</tbody> 
</table> 

はJavaScript

$(document).ready(function() { 
      $(".num1, .num2, .num3").each(function() { 
       $(this).keyup(function() { 
        calculateSum(); 
       }); 
      }); 
     }); 


     function calculateSum() { 
      var tot1 = 0; 
      var tot2 = 0; 
      var tot3 = 0; 

      // Paying 

      $(".num1").each(function() { 
       if (!isNaN(this.value) && this.value.length != 0) { 
        tot1  += parseFloat(this.value); 
       } 
      }); 
      $("input[name='tot1']").val(tot1.toFixed(2)); 


      $(".num2").each(function() { 
       if (!isNaN(this.value) && this.value.length != 0) { 
        tot2+= parseFloat(this.value); 
       } 
      }); 
      $("input[name='tot2']").val(tot2.toFixed(2)); 

      $(".num3").each(function() { 
       if (!isNaN(this.value) && this.value.length != 0) { 
        tot3+= parseFloat(this.value); 
       } 
      }); 
      $("input[name='tot3']").val(tot3.toFixed(2)); 



     } 
     window.onload = calculateSum; 

ここに私のデモのバイオリンです。

Demo here

任意の助けもいただければ幸いです!ありがとうございました。

+0

カンマで数字を表示したいという意味ですか? –

+1

カンマがすでに合計に追加されていませんか?デモを確認する –

+0

私はそれが自動的にjsfiddleに追加されたと思う。 –

答えて

1

あなたはこれを見てください

$(".num1").each(function() { 
    if (!isNaN(this.value) && this.value.length != 0) { 
     tot1 += parseFloat(this.value); 
     num1 = parseFloat(this.value); 
     this.value = num1.formatMoney(2, '.', ','); 
    } 
});  
$("input[name='tot1']").val(tot1.formatMoney(2, '.', ',')); 

、としてcalculateSum()に入力の値を変更することができます。

Working Fiddle

0

あなただけ(またはthis forked fiddleのように)次のようにtoLocaleStringを使用する必要があります。

$(".num1").each(function() { 
    if (!isNaN(this.value) && this.value.length != 0) { 
     tot1  += parseFloat(this.value); 
    } 
}); 
$("input[name='tot1']").val(tot1.toLocaleString()); 


$(".num2").each(function() { 
    if (!isNaN(this.value) && this.value.length != 0) { 
     tot2+= parseFloat(this.value); 
    } 
}); 
$("input[name='tot2']").val(tot2.toLocaleString()); 

$(".num3").each(function() { 
    if (!isNaN(this.value) && this.value.length != 0) { 
     tot3+= parseFloat(this.value); 
    } 
}); 
$("input[name='tot3']").val(tot3.toLocaleString());
+0

あなたがフィドルを見れば、彼はIE10以前でさえそれをするコードを持っています! –

+0

@JaromandaX:RegExpsを使用してコンマでドットを切り替えるという、かなり複雑なメソッドがあったにもかかわらず、特にtoLocaleStringの使用は見られませんでした。 – Pineda

+0

私のポイントはa)ここのコードはフィドルでのコードと一致しません。 b)toLocaleStringは、IEのバージョン11(および他のすべての良いブラウザ)でのみ機能します。 –

関連する問題