我有一个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进行了硬编码。如何汇总所有“金额”列的值并显示在“到期余额”中。我尝试过无法到达那里。
答案 0 :(得分:1)
如果您想从“数量”和“费率”中获取价格,则可以这样做。
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>
答案 1 :(得分:1)
您也可以使用香草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);