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

Question

我有一个这样的产品表:

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

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 相同的值。因此，不应显示 12,350,00，而应显示 13,286,000(因为 value_added_tax 的总和必须添加到 total_final )。

执行此计算的行位于此处:

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

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

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

提前致谢。

Answer 1

动态列添加

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

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

您会注意到循环忽略了第一个 tr，因为它没有 <td>的(它使用 <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>