获取数组中值的总和答案

【问题标题】：Get the sum of values in array获取数组中值的总和
【发布时间】：2023-04-03 21:24:02
【问题描述】：

我有这个示例代码：

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

我想在“价格”类下获得这些值的总和，但是我的输出类似于：

1 4 6 总和为 0[object HTMLTableCellElement][object HTMLTableCellElement][对象 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+ ".";
});

【问题讨论】：

你需要在数组中，还是字符串输出可以？如我所见，您正在尝试两种方式？

标签： javascript jquery arrays html-table

【解决方案1】：

你有两个问题：

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

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

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

【讨论】：

为什么不将 $setTotal 行移到 .each 循环之外？
是的，这更好，假设 Razor 不想使用超时进行可视化。

【解决方案2】：

类似这样的：

使用 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 + ".");

【讨论】：

【解决方案3】：

您将 html 元素/对象推送到您的总和，不知道为什么，并且由于您已经在使用 jQuery，因此不需要原生 JS 选择器和方法：

var totalPrice = 0;


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


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

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

此外，您可以从 each() 循环中移动价格显示，无需在循环内更新...

http://jsfiddle.net/216fouoy/

【讨论】：

【解决方案4】：

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

var totalPrice = 0;

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

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

【讨论】：

【解决方案5】：

您需要从 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+ ".";
});

【讨论】：

我比其他人更了解这段代码。谢谢您的帮助！ :D
没问题，很高兴能帮上忙 :)

【解决方案6】：

试试：

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

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

});

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

【讨论】：