使用jQuery計算表單元格中的總值

Question

我有一個值如下表，

<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'。 我不確定我缺少什么。 請提出建議。

Answer 1

使用isNaN檢查單元格是否包含值，然后將其轉換：

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

注意：如果使用“ parseInt”，它將始終返回整數-因此，如果表中有十進制值，請使用Number（String） ，它將嘗試轉換所有看起來像數字的值...

Answer 2

您需要使用td元素的text / html並在添加之前將值解析為整數：

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

Answer 3

您的代碼工作正常，問題在於您將總數連接在一起，因此Use parseInt()函數將解析字符串並返回整數。

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

句法

parseInt(string, radix);

參數

串

要解析的值。 如果string不是字符串，則將其轉換為1。 字符串中的前導空格將被忽略。

基數

2到36之間的整數，表示上述字符串的基數（數學數字系統中的基數）。 為人類常用的十進制系統指定10。 始終指定此參數，以消除讀者的困惑並保證可預測的行為。 當未指定基數時，不同的實現產生不同的結果。

Answer 4

由於prices是jQuery對象，因此請使用$.fn.each() ，然后需要使用$.fn.text()來獲取文本。

還可以使用parseInt()將字符串轉換為整數。

采用

var prices = $('.price');
var total = 0;
prices.each(function() {
    var price = $(this).text(); //use the method to get text of cell
    if (price != 'NA') {
        total = total + parseInt(price, 10); //use parseInt to convert to number
    }
});
$('.total').text(total);

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 5

創建一個搗鼓你... 小提琴

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

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

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

});

Answer 6

$(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);
});

這是小提琴

Answer 7

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