如何从javascript获取列的所有行的总和？答案

【问题标题】：How to get sum of all row of the column from javascript?如何从javascript获取列的所有行的总和？
【发布时间】：2020-08-26 08:09:27
【问题描述】：

我有一个 html 表格

<table class="table">
    <thead class="table-primary">
        <tr>
            <th>Date</th>
            <th>SKU</th>
            <th style="width: 300px;">Activity</th>
            <th>QTY</th> 
            <th>RATE</th>
            <th>AMOUNT</th>
        </tr>
    </thead>
    <tbody>
        
                <tr>
                    <td>09/01/2020</td>
                    <td></td>
                    <td>
                        <strong>Test</strong><br />
                        Manish Rijal - JOB# 12345 <br />
                        1TestBiraz
                    </td>
                    <td style="text-align: center">78</td>
                    <td style="text-align: center">56</td>
                    <td style="text-align: center">99</td>
                </tr>
                <tr>
                    <td>09/01/2020</td>
                    <td></td>
                    <td>
                        <strong>qwert</strong><br />
                        Manish Rijal - JOB# 12345 <br />
                        asd
                    </td>
                    <td style="text-align: center">8</td>
                    <td style="text-align: center">4</td>
                    <td style="text-align: center">32</td>
                </tr>
                <tr>
                    <td>09/01/2020</td>
                    <td></td>
                    <td>
                        <strong> Leave</strong><br />
                        Manish Rijal - JOB# 12345 <br />
                        asd
                    </td>
                    <td style="text-align: center">8</td>
                    <td style="text-align: center">4</td>
                    <td style="text-align: center">32</td>
                </tr>
  
    </tbody>


</table>

<div>
<a style="margin-left: 305px;">BALANCE DUE</a>
<strong>$800.00</strong>
</div>

金额的值是动态的，可能有多行。现在我已经完成了 800.00 美元的硬编码。如何将所有金额列的值求和并显示在到期余额中。我试过无法到达那里。

https://jsfiddle.net/n6qo3u1b/

【问题讨论】：

您是在寻找金额 * 率还是？我们应该从哪里得到各个价格
@CarstenLøvboAndersen 个人价格可以从数量*费率获得
到目前为止您尝试过什么？你被困在哪里了？
@NicoHaase 我试过了，它已经从下面的答案中得到了一个想法

标签： javascript html jquery jquery-ui

【解决方案1】：

如果您想从 Quantity 和 Rate 获取价格，那么您可以这样做。

var price = 0;
$('table tbody tr').each(function() {
  var rate = +$(this).find("td:nth-last-child(3)").text();
  var amount = +$(this).find("td:nth-last-child(2)").text();

  price = price + (rate * amount);
})

$('.price strong').text('$' + price)

请注意，我已将 price 类添加到围绕“价格/强”的 div 中

演示

var price = 0;
$('table tbody tr').each(function() {
  var rate = +$(this).find("td:nth-last-child(3)").text();
  var amount = +$(this).find("td:nth-last-child(2)").text();

  price = price + (rate * amount);
})

$('.price strong').text('$' + price)

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-top: 30px;
}

td,
th {
  /*border: 1px solid #dddddd;*/
  text-align: left;
  padding: 8px;
}

thead {
  background: #DCE9F1
}

thead tr th {
  color: #4F90BB;
}

tr:nth-child(even) {
  background-color: #dddddd;
  width: 50%;
}

hr {
  color: #5A97BF;
  width: 90%;
  text-align: center;
  height: 1px;
}

hr.new4 {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead class="table-primary">
    <tr>
      <th>Date</th>
      <th>SKU</th>
      <th style="width: 300px;">Activity</th>
      <th>QTY</th>
      <th>RATE</th>
      <th>AMOUNT</th>
    </tr>
  </thead>
  <tbody>


    <tr>
      <td>09/01/2020</td>
      <td></td>
      <td>
        <strong>Test</strong><br /> Manish Rijal - JOB# 12345 <br /> 1TestBiraz
      </td>
      <td style="text-align: center">78</td>
      <td style="text-align: center">56</td>
      <td style="text-align: center">99</td>
    </tr>
    <tr>
      <td>09/01/2020</td>
      <td></td>
      <td>
        <strong>qwert</strong><br /> Manish Rijal - JOB# 12345 <br /> asd
      </td>
      <td style="text-align: center">8</td>
      <td style="text-align: center">4</td>
      <td style="text-align: center">32</td>
    </tr>
    <tr>
      <td>09/01/2020</td>
      <td></td>
      <td>
        <strong> Leave</strong><br /> Manish Rijal - JOB# 12345 <br /> asd
      </td>
      <td style="text-align: center">8</td>
      <td style="text-align: center">4</td>
      <td style="text-align: center">32</td>
    </tr>

  </tbody>


</table>

<hr style="border-top: 1px dotted #5A97BF" />

<div class="price">
  <a style="margin-left: 305px;">BALANCE DUE</a>
  <strong>$800.00</strong>
</div>

【讨论】：

【解决方案2】：

你也可以像这样使用 vanilla javascript 来做到这一点：

const nodes = document.querySelectorAll('td:last-child')
const arr = Array.from(nodes);

const res = arr.reduce((acc, curr) => {
  return acc += Number(curr.textContent)
}, 0)

console.log(res);

【讨论】：

这不会将多个数量和价格放在一起来得到价格。
用户询问如何获取所有“金额”列的总和
是的，但我相信运营商希望更新价格，如果您阅读评论，他希望价格是费率和金额之间的乘积。我知道这个问题并不清楚。