Question

我有这个示例代码：

<table>
    <tr>
        <td class="price">1</td>
    </tr>
    <tr>
        <td class="price">4</td>
    </tr>
    <tr>
        <td class="price">6</td>
    </tr>
</table>
                   <p id="setTotal"> </p>

我想在课程＃34;价格＆＃34;下获得这些价值的总和。但是我的输出类似于：

1 4 6 Sum为0 [object HTMLTableCellElement] [object HTMLTableCellElement] [object HTMLTableCellElement]。

我的JavaScript代码是：

var arr = [];
var totalPrice = 0;
var i;

$("td.price").each(function(){

arr.push($(this).text());
    totalPrice += this;
    document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

Answer 1

您需要从td获取文本并将其解析为数字。

小提琴：http://jsfiddle.net/4rwbyx3n/

var arr = [];
var totalPrice = 0;
var i;

$("td.price").each(function(){

arr.push($(this).text());

    var price = $(this).text();
    totalPrice += Number(price);
    document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

Answer 2

您有两个问题：

您正在totalPrice增加this，这是一个HTML元素。
您没有将HTML中的字符串值转换为整数。

以下是更改，以及一些小的改进/建议：

var totalPrice = 0;
$("td.price").each(function(i, td) {
    totalPrice += parseInt($(td).text());
});
$('#setTotal').html("Sum is " + totalPrice + ".");

Answer 3

尝试：

$("td.price").each(function(){

 arr.push($(this).text());
 totalPrice += (+$(this).text());
 document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";

});

您之前的结果的原因是您连接了HTML个元素，而不是其中的文本。

Answer 4

类似的东西：

使用javascript的array.map，您可以将某个数组转换为其他内容。

在这种情况下，将一个html元素数组转换为数字数组。

使用reduceRight对结果进行简单的add函数作为参数，数组的每个元素都被逐个累加并求和。

我们需要将它包装在jQuery.makeArray中，因为jQuery $（selector）.map将返回一个jQuery对象，我们需要一个原生的javascript数组。

var sum = jQuery.makeArray($("td.price").map(function(idx, num) { 
      return parseInt($(num).text()); 
}).reduceRight(function(a,b){return a+b;}));

然后

document.getElementById("setTotal").innerHTML = "Sum is "+sum+ ".";

或使用jquery

$("#setTotal").text("Sum is " + sum + ".");

Answer 5

你必须parseFloat元素的文本。您还需要jquery来处理.each()函数

＆＃13;

var totalPrice = 0;

$("td.price").each(function(){
  totalPrice += parseFloat($(this).text());
  document.getElementById("setTotal").innerHTML = "Sum is "+totalPrice+ ".";
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="price">1</td>
    </tr>
    <tr>
        <td class="price">4</td>
    </tr>
    <tr>
        <td class="price">6</td>
    </tr>
</table>
<p id="setTotal"> </p>

＆＃13;

Answer 6

你正在推动html元素/对象到你的总和，不知道为什么，因为你已经在使用jQuery，不需要本机JS选择器和方法：

var totalPrice = 0;


$("td.price").each(function(){


    totalPrice +=parseInt($(this).text());

}); 
$("#setTotal").html("Sum is "+totalPrice+ ".");

此外，您可以从每个（）循环移动显示价格，不需要在循环内更新...

http://jsfiddle.net/216fouoy/

获取数组中的值的总和

6 个答案: