Question

我正在尝试从表格中计算出每月支出。

想对所有金额进行合计并显示总计，例如一月份的总金额为$ 180，三月份的总金额为$ 230，五月份的总金额为$ 200。该金额应反映在总计栏中。我使用ng-repeat角度框架（动态表格）创建了此表格

我尝试了以下代码，该代码将汇总所有仅具有数值的单独列。此代码不适用于合并的行。

 for (col = 1; col < ncol + 1; col++) {
    console.log("column: " + col);
    sum = 0;
    $("tr").each(function(rowindex) {
      $(this).find("td:nth-child(" + col + ")").each(function(rowindex) {
        newval = $(this).find("input").val();
        console.log(newval);
        if (isNaN(newval)) {
          $(this).html(sum);
        } else {
          sum += parseInt(newval);
        }
      });
    });
  }
});

对此的任何帮助都会非常有帮助。

Answer 1

我会在显示金额的单元格中添加一个数据月属性，它对用户不可见，但对您有很大帮助。看看下面的解决方案。

function getMonth(month) {
  var monthCells = $("td[data-month='" + month  + "']"); // get all TDs with a data month attribute
  var sum = 0;
  for(var i = 0; i < monthCells.length; i++){ // iterate over the tds
			var amountCell = monthCells[i]; // get a td for given iteration
			var amountCellText = $(amountCell).text();  // get the text content
      sum += parseInt(amountCellText.replace(/\D/, "")); // in amoutnCellText replace anything that's not a digit into an empty string
  }

  return sum;
}

console.log(getMonth("march"))

table, th, td {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Total</th>
  </tr>
  <tr>
    <td rowspan="2">January</td>
    <td data-month="january">$100</td>
  </tr>
  <tr>

    <td data-month="january">$80</td>
  </tr>
  <tr>
    <td rowspan="2">March</td>
    <td data-month="march">$200</td>
  </tr>
  <tr>
    <td data-month="march">$30</td>
  </tr>
  <tr>
    <td>May</td>
    <td  data-month="may">$200</td>
  </tr>

</table>

Answer 2

这样的事情怎么样？

vm.data = [
        {
            month: 'January',
            savings: [
                { amount: 100 },
                { amount: 200}
            ]
        },
        { 
            month: 'February',
            savings: [
                { amount: 300 },
                { amount: 400 }
            ]
        }
    ];

在html中：

<table class="table table-bordered table-condensed">
    <tr>
        <th>Month</th>
        <th>Savings</th>
        <th>Total</th>
    </tr>
    <tr ng-repeat="row in vm.data">
        <td>{{row.month}}</td>
        <td>
            <table class="table table-bordered table-condensed">
                <tr ng-repeat="s in row.savings">
                    <td>${{s.amount}}</td>
                </tr>
            </table>
        </td>
        <td>${{vm.getTotal(row.savings)}}</td>
    </tr>
</table>

在JS中：

vm.getTotal = getTotal;

function getTotal(savings) {
        var total = 0;
        angular.forEach(savings,
            function (row) {
                total += row.amount;
            });

        return total;
    }

这里的关键是数据建模，以便您具有简单的求和功能。希望对您有所帮助。

Sample

计算合并行的总和并显示在第三列

2 个答案: