[英]How to get sum of all row of the column from javascript?
I have an html table我有一个 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>
The value of the amount is dynamic and there might be multiple row.金额的值是动态的,可能有多行。 Right Now I have done hard coded for $800.00.现在我已经完成了 800.00 美元的硬编码。 How can I sum the value of all Amount Column and display in Balance Due.如何汇总所有金额列的值并显示在到期余额中。 I tried by couldn't get there.我试过无法到达那里。
https://jsfiddle.net/n6qo3u1b/ https://jsfiddle.net/n6qo3u1b/
If you want to get the prices from Quantity and Rate then you can do it like.如果您想从 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)
Please note I've added the class price
to the div that surrounds the "price/strong"请注意,我已将课程price
添加到“价格/强”周围的 div 中
Demo演示
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>
You can also do it with vanilla javascript like so:您也可以使用 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.