javascript - 用js将每一行的数字求和

Question

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

在文本区域中输入行的示例:

1. 10 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/

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