NooBskie NooBskie - 7 months ago 9
Javascript Question

Detect if price is higher or lower than 200.00 then style (this) table row

Note This question is very simalar to my previous question located here but I still cant seem to wrap my head around it.

Here is my current table structure:



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table group-9569" width="100%">
<tbody>
<tr>
<td class="order_id" width="10%"><span class="orderId">9569</span></td>
<td class="order_date" width="13%">
<span >2016-04-14 17:39:00</span>
</td>
<td class="order_name" width="10%"><span >John Smith</span></td>
<td class="order_paid" width="5%">
<span class="total-cost-9569 orderPaid">¥81.28</span>
</td>
<td class="order_shipping" width="13%">Shipping</td>
<td class="order_status" width="10%">
<span class="order-status-9569">Paid</span>
</td>
<td class="order_tracking" width="10%"></td>
<td class="new-msg-img-9569">
</td>
</tr>
</tbody>
</table>

<table class="table group-9564" width="100%">
<tbody>
<tr>
<td class="order_id" width="10%"><span class="orderId">9564</span></td>
<td class="order_date" width="13%">
<span >2016-04-14 17:24:10</span>
</td>
<td class="order_name" width="10%"><span >Jane smith</span></td>
<td class="order_paid" width="5%">
<span class="total-cost-9568 orderPaid">¥209.69</span>
</td>
<td class="order_shipping" width="13%">Shipping</td>
<td class="order_status" width="10%">
<span class="order-status-9568">Paid</span>
</td>
<td class="order_tracking" width="10%"></td>
<td class="new-msg-img-9568">
</td>
</tr>
</tbody>
</table>





I need to detect if
orderPaid
is higher or lower than
¥200.00
then style
this
table row

I know can convert it to a javascript number like so:

var orderPaid = $('.orderPaid').html();
var number = Number( orderPaid.replace(/[^0-9\.]+/g,""));


The problem is that will get every order when I just need them one by one per row.

What would be the best way of going about this problem and how do I differentiate each row independently to style by pricing?

Answer

You iterate

$('.orderPaid').each(function(index, element) {

    var content = $(element).text();
    var number  = +orderPaid.replace(/\D/g,"");

    if ( number > 200 ) {
        $(element).css('somekey', 'somevalue')
    }

});