JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<table>
			<tbody>
				<tr>
					<th colspan="14" class="apexir_REPEAT_HEADING" id="BREAK_COMPANY_1">Business Segment : <span class="apex_break_headers"><!--0--><!--0-->Advanced Technology Facilities</span></th>
				</tr>
				<tr style="display: table-row;">
					<th id="MARKET">
					<div style="text-align:center;">
						Market
					</div></th><th id="INCOMING_ORDERS_BUDGET">
					<div id="apexir_INCOMING_ORDERS_BUDGET" onclick="gReport.controls.widget(this.id)" style="text-align:center;">
						Incoming
						<br>
						Orders
						<br>
						Budget
					</div></th><th id="INCOMING_ORDERS">
					<div id="apexir_INCOMING_ORDERS" onclick="gReport.controls.widget(this.id)" style="text-align:center;">
						Incoming
						<br>
						Orders
					</div></th><th id="INCOME">
					<div style="text-align:center;">
						INCOME
					</div></th><th id="COST">
					<div style="text-align:center;">
						COST
					</div></th><th id="MARGIN">
					<div style="text-align:center;">
						Margin
					</div></th><th id="Percentage">
					<div style="text-align:center;">
						Margin
						<br>
						%
					</div></th><th id="BACKLOG">
					<div style="text-align:center;">
						Backlog
					</div></th><th id="INSIDE_SALES">
					<div style="text-align:center;">
						Inside
						<br>
						Sales
					</div></th><th id="OUTSIDE_SALES">
					<div style="text-align:center;">
						Outside
						<br>
						Sales
					</div></th><th id="PURSUITS">
					<div style="text-align:center;">
						Pursuits
					</div></th><th id="MSL">
					<div style="text-align:center;">
						MSL
					</div></th><th id="GAM">
					<div style="text-align:center;">
						GAM
					</div></th>
				</tr>
				<tr class="even">
					<td align="left" headers="MARKET BREAK_COMPANY_1"><span style="white-space: nowrap">Default</span></td><td align="right" headers="INCOMING_ORDERS_BUDGET BREAK_COMPANY_1">-</td><td align="right" headers="INCOMING_ORDERS BREAK_COMPANY_1"><a...

CSS

.red { color:Red !important; }

JavaScript

$('tr td.apexir_AGGREGATE_VALUE:first-child').parent().each(function() {
	income = parseFloat($('td:eq(3)',this).text().replace(/[^0-9\.]+/g,""));
	cost = parseFloat($('td:eq(4)',this).text().replace(/[^0-9\.]+/g,""));
	percentage = (income - cost) / income * 100;
	
	if ($.isNumeric( percentage ) ) {
		$('td:eq(6)',this).text(percentage.toFixed(2) + '%');
	} else {
		$('td:eq(6)',this).text('---');
    }
})