I'm creating a chrome extension and one of my first steps is to create an array of college professor names that are in a table which is listed on a website. Here is the JS and it works perfectly on the main page. However when I go on to a course which list's specific professor names, it wont work most of the time. It will still grab the professors that are in the main page all the time because it's all in the same document. Every so often when i keep refreshing the page it randomly grabs all the professors but most of the time it will not. So it looks like my selectors are working but why does it not work every time?
var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
console.log(tableElementNode);
Here is a snippet of the html on the main webpage (which is the same on all other course pages). The JS code above grabs the professor "Burgos" and lists it on to the log.
<table class="section-detail-grid table-bordered-wrap">
<thead>
<tr>
<th class="persist chk-col">
<input type="checkbox" checked="" class="select-all">
</th>
<th class="persist hidden-print info-col"></th>
<th>CRN #</th>
<th>Status</th>
<th class="persist">Subject</th>
<th>Course</th>
<th class="persist">Section</th>
<th>Instructor</th>
<th>Day(s) & Location(s)</th>
<th>Credits</th>
<th>USF System Institution </th>
</tr>
</thead>
<tbody>
<tr data-id="88047" data-index="0" class="section-item section first">
<td class="persist chk-col">
<input type="checkbox" class="select" checked="">
</td>
<td class="persist col-icons hidden-print">
<button role="button" class="btn btn-icon btn-section-details persist" data-toggle="tooltip" title="" data-original-title="Show Section Details"><i class="glyphicons circle_info"></i> </button>
</td>
<td class="">
88047
</td>
<td class="">
Enrolled
</td>
<td class="persist">
MAC
</td>
<td class="">
2283
</td>
<td class="persist">
003
</td>
<td class="">
<div class="professor" id="0">Burgos, Fernando</div>
</td>
Here is a snippet of the html on a certain course webpage and the JS code doesn't seem to grab the professor name(Wang, Jing) here.
<table class="section-detail-grid table-bordered-wrap">
<thead>
<tr>
<th class="persist chk-col">
<input type="checkbox" class="select-all">
</th>
<th class="persist info-col"></th>
<th>CRN #</th>
<th class="persist">Subject</th>
<th>Course</th>
<th class="persist">Section</th>
<th class="persist">Component</th>
<th>Instructor</th>
<th>Day(s) & Location(s)</th>
<th>Credits</th>
<th>USF System Institution </th>
<th>Parts of Term</th>
</tr>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section first linked-section">
<td class="persist chk-col row-label">
<input type="checkbox" class="select " data-sectionid="80886" checked="">
</td>
<td class="persist col-icons">
<ul>
<li class="persist">
<button role="button" class="btn btn-icon btn-section-details persist" data-toggle="tooltip" title="" data-original-title="Show Section Details"><i class="glyphicons circle_info"></i> <span class="visible-acc">Section Details</span></button>
</li>
</ul>
</td>
<td class=" row-label">
80886
</td>
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
</td>
<td class=" row-label">
<div> <span aria-label="Monday">M</span><span aria-label="Wednesday">W</span> 9:30am - 10:45am - CHE 103</div>
</td>
<td class=" row-label">
3
</td>
<td class=" row-label">
Tampa
</td>
<td class=" row-label">
Fall 2018 - Full Term
</td>
</tr>
<tr class="section-flags">
I've looked almost everywhere for a solution and cannot find anything.
Edit: I've even right clicked and copied the selector on the element I need and the JS will still not grab the find the element
You need to do array[...].outerText to get content inside div.
var tableElementNode = document.querySelectorAll(".section-detail-grid tbody div")[0].outerText;
console.log(tableElementNode);
<table class="section-detail-grid table-bordered-wrap">
<thead>
<tr>
<th class="persist chk-col">
<input type="checkbox" class="select-all">
</th>
<th class="persist info-col"></th>
<th>CRN #</th>
<th class="persist">Subject</th>
<th>Course</th>
<th class="persist">Section</th>
<th class="persist">Component</th>
<th>Instructor</th>
<th>Day(s) & Location(s)</th>
<th>Credits</th>
<th>USF System Institution </th>
<th>Parts of Term</th>
</tr>
</thead>
<tbody>
<tr data-id="80886" data-index="0" class="section-item section first linked-section">
<td class="persist chk-col row-label">
<input type="checkbox" class="select " data-sectionid="80886" checked="">
</td>
<td class="persist col-icons">
<ul>
<li class="persist">
<button role="button" class="btn btn-icon btn-section-details persist" data-toggle="tooltip" title="" data-original-title="Show Section Details"><i class="glyphicons circle_info"></i> <span class="visible-acc">Section Details</span></button>
</li>
</ul>
</td>
<td class=" row-label">
80886
</td>
<td class="persist row-label">
COP
</td>
<td class=" row-label">
3514
</td>
<td class="persist row-label">
001
</td>
<td class="persist row-label">
Class Lecture
</td>
<td class=" row-label">
<div>Wang, Jing</div>
</td>
<td class=" row-label">
<div> <span aria-label="Monday">M</span><span aria-label="Wednesday">W</span> 9:30am - 10:45am - CHE 103</div>
</td>
<td class=" row-label">
3
</td>
<td class=" row-label">
Tampa
</td>
<td class=" row-label">
Fall 2018 - Full Term
</td>
</tr>
</tbody>
</table>
Keep the JavaScript code just before the body end tag. I also faced the same issue but after following this everything looks fine.
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
function linksSwap() {
document.getElementById("left").style.display = "none";
document.getElementById("right").style.display = "table-row";
}
function rechtsSwap() {
document.getElementById("right").style.display = "none";
document.getElementById("left").style.display = "table-row";
}
<ul>
<li><a onclick="linksSwap()" href="#">Left</a></li>
<li><a onclick="rechtsSwap()" href="#">Right</a></li>
</ul>
<div class="tabel">
<table class="tg" id="eersteTabel">
<tbody>
<tr id="right">
<td class="tg-1h1z">Coca Cola 1 </td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
<tr id="right">
<td class="tg-1h1z">Coca Cola Zero 2</td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
<tr id="right">
<td class="tg-1h1z">Coca Cola Light 3</td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
<tr id="left">
<td class="tg-1h1z">Fïnley Bitter Lemon 4 </td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
<tr id="left">
<td class="tg-1h1z">Cassis 5</td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
</tbody>
</table>
</div>
I made a code where I have this table which I want to order [Left | Right]
I hoped the javascript would target all the ID's. Instead of only one.
(I left out CSS because its not important)
I added numbers to make it a bit more clear,
What is happening:
Pressing Left: 1235
Pressing Right: 2345
What I want:
Left: 45
Right: 123
Is there another way to fix this instead of using a forloop?
Add working code since topic is closed.
function linksSwap() {
document.querySelectorAll(".left").forEach(function(e){e.style.display = "none"})
document.querySelectorAll(".right").forEach(function(e){e.style.display = "table-row"})
}
function rechtsSwap() {
document.querySelectorAll(".left").forEach(function(e){e.style.display = "table-row"})
document.querySelectorAll(".right").forEach(function(e){e.style.display = "none"})
}
<ul>
<li><a onclick="linksSwap()" href="#">Left</a></li>
<li><a onclick="rechtsSwap()" href="#">Right</a></li>
</ul>
<div class="tabel">
<table class="tg" id="eersteTabel">
<tbody>
<tr class="right">
<td class="tg-1h1z">Coca Cola 1 </td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
<tr class="right">
<td class="tg-1h1z">Coca Cola Zero 2</td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
<tr class="right">
<td class="tg-1h1z">Coca Cola Light 3</td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
<tr class="left">
<td class="tg-1h1z">Fïnley Bitter Lemon 4 </td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
<tr class="left">
<td class="tg-1h1z">Cassis 5</td>
<td class="tg-utt9">
<input type="tel" />
</td>
</tr>
</tbody>
</table>
</div>
You are forgetting one very basic and fundamental concept of HTML that the same class can be given to any number of elements in an HTML document, but id has to be unique. That means one id can be assigned to one and only one element in the entire html document. Thats the sole purpose IDs were made, to be unique. This is what is resulting in the error
$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2
DatePicker field is non-editable and I cannot send data using sendkeys. The only way is to click on the date. I have tried many options but nothing is working.
I want to click on tomorrow's date that's today+1 date. Please see this code:
<input id="asOfDate" name="asOfDate" placeholder="Enter Date" readonly="true" ng-model="asOfDate" class="form-control date-picker asOfDate ng-pristine ng-valid ng-valid-pattern ng-touched" type="text" ng-pattern="/^([0]?\d{1}|[1][0-2])\/(([0-2]?\d{1})|([3][0,1]{1}))\/(([1]{1}[9]{1}[9]{1}\d{1})|([1-9]{1}\d{3}))$/" style="">
#addeventModal > div > div > div.modal-body.modal-body-height > form > div.row > div > div > span
<span ng-show="AddTimeLine.asOfDate.$error.pattern" class="text-danger ng-hide">Incorrect Format, should be MM/DD/YYYY</span>
<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<thead>
<tr>
<th class="cw"> </th>
<th class="prev" style="visibility: visible;">
«</th>
<th colspan="5" class="datepicker-switch">October 2017</th>
<th class="next" style="visibility: visible;">»</th>
</tr>
<tr>
<th class="cw"> </th>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cw">39</td>
<td class="old day">24</td>
<td class="old day">25</td>
<td class="old day">26</td>
<td class="old day">27</td>
<td class="old day">28</td>
<td class="old day">29</td>
<td class="old day">30</td>
</tr>
<tr>
<td class="cw">40</td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
<td class="day">7</td>
</tr>
<tr>
<td class="cw">41</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
<td class="day">14</td>
</tr>
<tr>
<td class="cw">42</td>
<td class="day">15</td><td class="day">16</td>
<td class="day">17</td><td class="day">18</td><td class="day">19</td>
<td class="day">20</td><td class="day">21</td></tr>
<tr><td class="cw">43</td><td class="day">22</td>
<td class="day">23</td><td class="day">24</td>
<td class="day">25</td><td class="day">26</td>
<td class="day">27</td><td class="day">28</td>
</tr><tr><td class="cw">44</td><td class="day">29</td>
<td class="day">30</td><td class="day">31</td>
<td class="new day">1</td>
<td class="new day">2</td>
<td class="new day">3</td>
<td class="new day">4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="8" class="today" style="display: table-cell;">Today</th></tr><tr><th colspan="7" class="clear" style="display: none;">Clear</th></tr></tfoot></table></div>
How to write code for this?
Add days to JavaScript Date
Add a day with the help of above question
After that retrive the day
var day = todayTime.getDate();
Since you have will have only one month displayed, all dates will be unique.
So your xpath would be
//td[#class="day"][text()=day]
You should be able to click with below code
WebElement button = driver.findElement(By.xpath("//td[#class="day"][text()=day]
"));
JavascriptExecutor jse = (JavascriptExecutor)driver;
jse.executeScript("arguments[0].click();", button);
I suggest using javascript executor since there might be a overlay window
browser.executeScript("arguments[0].click();",element(by.xpath("[//td[#class="day"][text()=day]")).getWebElement());
Ps : here pass the current day as day variable.
I'm encountered this problem from my workplace and i kinda feel this table isn't common table for me. I want to sort this table like when i click one of the header, it got sorted from that header category. In example i have this html code:
<html>
<head>
</head>
<body>
<table id="AirflightDetail">
<thead>
<tr>
<th class="col-lg-2 text-center">Airline</th>
<th class="col-lg-2 text-center">Depart</th>
<th class="col-lg-2 text-center">Arrival</th>
<th class="col-lg-2 text-center">Duration</th>
<th class="col-lg-2 text-center">Price</th>
</tr>
</thead>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline X</span>
<br>
<p>AX-006</p>
</td>
<td class="text-center" min-width="100px">
<strong>13:10</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:25</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct</span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$327</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline H</span>
<br>
<p>AH-999</p>
</td>
<td class="text-center" min-width="100px">
<strong>18:30</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>19:45</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline K</span>
<br>
<p>AK-100</p>
</td>
<td class="text-center" min-width="100px">
<strong>12:05</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:20</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>2hour</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
</table>
</body>
</html>
When i click the header title in example Airline, the table got sorted from the airline like:
<html>
<head>
</head>
<body>
<table id="AirflightDetail">
<thead>
<tr>
<th class="col-lg-2 text-center">Airline</th>
<th class="col-lg-2 text-center">Depart</th>
<th class="col-lg-2 text-center">Arrival</th>
<th class="col-lg-2 text-center">Duration</th>
<th class="col-lg-2 text-center">Price</th>
</tr>
</thead>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline H</span>
<br>
<p>AH-999</p>
</td>
<td class="text-center" min-width="100px">
<strong>18:30</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>19:45</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline K</span>
<br>
<p>AK-100</p>
</td>
<td class="text-center" min-width="100px">
<strong>12:05</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:20</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>2hour</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline X</span>
<br>
<p>AX-006</p>
</td>
<td class="text-center" min-width="100px">
<strong>13:10</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:25</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct</span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$327</strong>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I've already seen many javascript sort the table but it only sort the element of tbody or but i never seen any javascript that can sorting the tbody. How can i do that with javascript and without jquery
There is a bunch of stuff involved on this one.
First of all you have to attach event listeners to all your thead th items so when they are clicked they'll perform the sort action.
var airFlightTable = document.querySelector("#AirflightDetail");
var tableHeaders = airFlightTable.querySelectorAll("thead tr th");
tableHeaders.forEach(function(tableHeader){
tableHeader.addEventListener("click", onTableHeaderClick);
});
When click happens you start the sort process by gathering all tbody tags and manipulate their DOM.
function onTableHeaderClick(event){
var sortBy = event.currentTarget.innerHTML;
if(sortBy === 'Airline'){
airFlightTable.querySelectorAll(".table-result-list").forEach(function(tableResultsLIst){
var items = [].slice.call(tableResultsLIst.querySelectorAll("td"));
var sortedItems = items.sort(); //you can place your sort logic here and after you're done you have to replace items of current tbody with sorted ones
});
}
}
There is some work left for you, but you should be fine from this point. Here is a JSBin with this implementation
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?
You iterate
$('.orderPaid').each(function(index, element) {
var content = $(element).text();
var number = +content.replace(/[^0-9\.]+/g,"");
console.log(number)
if ( number > 200 ) {
$(element).css('background', '#ff9b9b');
}
});