Hello everyone,
I have a tabel in a popup , dynamically generated, like this:
<table>
<tr>
<td class="quantity">2</td>
<td class="amount">€ 0.30</td>
<td class="subtotal">€ 0.6</td>
</tr>
<tr>
<td class="quantity">3</td>
<td class="amount">€ 0.80</td>
<td class="subtotal">€ 2.4</td>
</tr>
<tr>
<td class="quantity">5</td>
<td class="amount">€ 0.00</td>
<td class="subtotal">€ 0</td>
</tr>
</table>
I sum the columns td without problems, for example like this :
$( window ).load(function() {
var subtotale = 0;
$(".subtotal").each(function(){
subtotale += parseFloat($(this).text().replace(/[^0-9\.-]+/g,""));
});
$('#subtotale').html("\u20AC " + subtotale);
});
Now I need to sum the column class " .quantity td", but picking only the rows where class “.amount” is higher than 0.
In my example the result should be 5, picking only the first two rows.
Anyone could help me please?
$('.quantity')
.filter(function (i, e) {
// short for whatever you use to get the number
return +e.textContent > 0
})
.each(...)
Note: it would make life easier, if the € signs would be added by CSS.
PaulOB
December 13, 2017, 11:00am
3
I’m sure Dormilich’s answer is much better and the way to go but this was my long winded attempt (just because it was quiet around here) .
$(window).load(function() {
var subtotale = 0;
var subtotale2 = 0;
$(".subtotal").each(function() {
subtotale += parseFloat($(this).text().replace(/[^0-9\.-]+/g, ""));
});
$('#subtotale').html("\u20AC " + subtotale);
$(".quantity").each(function() {
var amount = $(this).next();
if (parseFloat($(amount).text().replace(/[^0-9\.-]+/g, "")) > 0) {
subtotale2 += parseFloat($(this).text().replace(/[^0-9\.-]+/g, ""));
}
});
$('#subtotale2').html(subtotale2);
});
<table>
<tr>
<td class="quantity">4</td>
<td class="amount">€ 0.30</td>
<td class="subtotal">€ 0.6</td>
</tr>
<tr>
<td class="quantity">6</td>
<td class="amount">€ 0.80</td>
<td class="subtotal">€ 2.4</td>
</tr>
<tr>
<td class="quantity">8</td>
<td class="amount">€ 0.00</td>
<td class="subtotal">€ 0</td>
</tr>
</table>
<div> Subtotal = <span id="subtotale"></span></div>
<div> Quantity Subtotal = <span id="subtotale2"></span></div>
(This is probably the wrong approach and I guess you should be able to do it all in one loop.)
@PaulOB : Thank you , but it doesn’t work. It loops through the rows, without filtering. It results 30.
@Dormilich : Thank you !
It didn’t filter how I needed,but I implemented your suggestion with @PaulOB ’s one, like this:
$('.quantity').filter(function (i, e) {
// short for whatever you use to get the number
return +parseFloat($(this).next().text().replace(/[^0-9\.-]+/g,"")) > 0
}).each(
function(){
items += parseFloat($(this).text());
$('#items').html( items);
});
Thank you everyone!!
1 Like
In case anyone would want to look into CSS-generated content:
https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Abefore
1 Like
PaulOB
December 13, 2017, 12:01pm
6
It worked for me Here’s a screenshot from the code I posted.
Not to worry though and glad you got it working with a better solution
system
Closed
March 14, 2018, 7:01pm
7
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.