用 js 对每行的数字求和

Sum numbers of each line with js

本文关键字：数字 求和 js      更新时间：2023-09-26

我需要的是当我在文本区域输入数字时，我需要它来获取每行的总和。

在文本区域输入的行示例：

    10
  1. 10 10
  2. 99 11
  3. 11 11

Div 的示例，我得到每行的总和

  1. 30
  2. 110
  3. 22

我有一个脚本，但它仅显示带有警报的结果。我不知道该怎么做，所以它会在div 上显示所有结果。现在div 只显示最后一行的结果。

$('#sub').click(function() {
   var grandTotal = 0,
       rowTotals = [], // array to hold individual row totals
       rowData,
       rows,
       val,
       rawData = document.getElementById('nums').value;
   // if desired replace this comment with regex validation of rawData
   rows = rawData.split("'n");
   for (var i=0; i < rows.length; i++) {
      rowTotals[i] = 0;
      rowData = rows[i].split(" ");
      // if you need to test that each row has the same number
      // of values in it do that here
      for (var j=0; j < rowData.length; j++) {
         val = parseFloat(rowData[j]);
         // add validation of val here
         rowTotals[i] += val;
      }
      alert("Total for row " + (i + 1) + ": " + rowTotals[i]);
        // ALERT SHOWS RESULT FOR EVERY LINE
$('#res').html(rowTotals[i]);
        // HTML SHOWS RES FOR LAST LINE ONLY. I NEED IT TO SHOW RESULTS OF ALL LINES
   }
});

 

<textarea id="nums" rows="10"></textarea> 
    <div id="res"></div>
<input type="button" id="sub" value="Sum">

https://jsfiddle.net/9yc70csj/1/

在函数开始时，使用 $('#res').html("") 重置结果。

然后，要将结果添加到div，请使用以下代码：

 var div = $('<div/>');
 div.text("Total for row " + (i + 1) + ":" + rowTotals[i]);
 $('#res').append(div);

你创建一个新的div，然后将你想要的文本放在里面。然后将其附加到结果中，因此每个新div 都将位于 #res 容器的末尾。

此外，最好正确处理空行或有语法错误的行。例如，您可以：

  • 检查行是否以数字开头（以排除空行），如下所示

    if(!rows[i].match("[0-9]+")) continue;

  • 使用 isNaN 检查您解析的内容是否确实是一个数字：

    val = parseFloat(rowData[j]);
if(!isNaN(val)) rowTotals[i] += val;

而不是：

alert("Total for row " + (i + 1) + ": " + rowTotals[i]);

添加这个：

$('#res').html($('#res').html()+rowTotals[i] + "<br>");

请参阅：https://jsfiddle.net/9yc70csj/3/

将最后一行更改为此 $('#res').html($('#res').html() + "<br>" + rowTotals[i]);

相关文章：