NooBskie NooBskie - 1 year ago 30
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')
    }

});