javascript - 如何计算自定义值的总和

Question

我有一张这样的产品表：

正如我在图片中提到的，我指定了一个名为 VAT 的字段，它代表增值税，我需要使用 jQuery 在页面上显示所有 VAT 字段的总和，所以这是我的尝试：

var total_price =  parseInt($('#total-price').html().replace(/\,/g,''));
$('#total-price').html(parseInt(total_price + (price*cnt)).toLocaleString());

var total_discount =  parseInt($('#total-discount').html().replace(/\,/g,''));
$('#total-discount').html(parseInt(total_discount + (discount*cnt)).toLocaleString());
                
var total_final =  parseInt($('#total-final').html().replace(/\,/g,''));
$('#total-final').html(parseInt(total_final + (price_final*cnt)).toLocaleString());

var total_vat =  parseInt($('#total-vat').html().replace(/\,/g,''));
$('#total-vat').html(parseInt(total_final + (price_final*cnt) + value_added_tax).toLocaleString());

这些变量的结果在这里：

但现在问题是sum of vats返回相同的值total-final。所以应该显示13,286,000 而不是 12,350,00 （因为必须将总和添加到）。value_added_taxtotal_final

进行此计算的行在这里：

$('#total-vat').html(parseInt(total_final + (price_final*cnt) + value_added_tax).toLocaleString());

这里缺少一些东西，或者我做错了。因此，如果您知道如何正确计算产品的最终价格 ( total_final+ value_added_tax)，请告诉我...

我真的很感激你们的任何想法或建议......

提前致谢。

标签： javascriptjquery

Answer 1

动态列添加

当您运行代码片段时，它将显示与您的图像相同的表格并计算总数。“价格”总计将是添加了增值税的价格列的总和。如果列的顺序发生变化，索引将在第一行代码中定义。

我已经展示了一种方法，可以动态地将任意大小的表上的列与任意行数相加。唯一硬编码的元数据是确定第 1 列是总价格，第 2 列是要添加到总计中第 1 列的增值税。如果您愿意，我很乐意解释任何代码。

您会注意到循环忽略了第一个 tr 因为它没有<td>'s （它使用<th>） - 但您的表格可能不是这样设置的，和/或您可能没有数据顶部的标题行。if (row_index!==0){如果您确实需要计算第一行，则可以取消注释该部分。

请看一下，如果这需要调整，请告诉我。

const rows = $("#table tr"),
finalIndex = 0, // column 1 is the Final
vatIndex = 1, // column 2 is the VAT
priceIndex = 3 // column 4 is the Price
let tally = [];
rows.each(function(row_index) {
  $(this).find('td').each(function(col_index) {
    if (row_index == rows.length - 1) {
      // get totals
      if (col_index == finalIndex) $(this).html((tally[priceIndex] + tally[vatIndex]).toLocaleString())
      else $(this).html(tally[col_index].toLocaleString())
    } else {
      // if (row_index != 0) {
      tally[col_index] = (tally[col_index] || 0) + (Number($(this).text().replace(/,/g, '')) || 0);
      // }
    }
  })
})

#table {
  border: 1px solid #ccc;
}

#table td,
#table th {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  padding: 10px;
  font-family: "Arial";
  color: #666;
  text-align: center;
}

#table td:first-child,
#table th:first-child {
  border-left: none;
}

tr#totals td {
  border-top: 2px solid #333;
  ;
  color: #000;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table' cellspacing='0'>
<tr><th>Final</th><th>VAT</th><th>-</th><th>Price</th><th>-</th><th>-</th><th>-</th><th>-</th></tr>
<tr><td>3,924,000</td><td>324,000</td><td>0</td><td>3,600,000</td><td>1,800,000</td><td>0</td><td>1,800,000</td><td>2</td></tr>
<tr><td>1,526,000</td><td>126,000</td><td>0</td><td>1,400,000</td><td>1,400,000</td><td>0</td><td>1,400,000</td><td>1</td></tr>
<tr><td>5,886,000</td><td>486,000</td><td>0</td><td>5,400,000</td><td>1,800,000</td><td>0</td><td>1,800,000</td><td>3</td></tr>
<tr><td>1,950,000</td><td>0</td><td>0</td><td>1,950,000</td><td>1,950,000</td><td>00</td><td>1,950,000</td><td>1</td></tr>
<tr id='totals'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>