JSFiddle - React, Tailwind, and code Playground

by ipeshev

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<div ng-controller="TableCtrl">
<table cellspacing="0" class="prodListTbl">
<colgroup>
	<col width="15%">
	<col width="45%">
	<col width="20%">
	<col width="20%">
</colgroup>
<tbody><tr>
	<th>&nbsp;</th>
	<th><b>Почти всички артикули са с инвестиционна цел. Тези с удебелен шрифт са с цена, най-близка до борсовата.</b></th>
	<th style="text-align:right">Купува (BGN)</th>
	<th style="text-align:right">Продава (BGN)</th>
</tr>

<tr>
	<td><b>H80</b></td>
	<td>Сребро с чистота 800 (гр.)</td>
	<td style="text-align:right">0.60</td>
	<td style="text-align:right">-</td>
</tr>

<tr>
	<td class="row"><b>H25</b></td>
	<td class="row">Сребро с чистота 925 (гр.)</td>
	<td style="text-align:right" class="row">0.69</td>
	<td style="text-align:right" class="row">-</td>
</tr>

<tr>
	<td><b>XAG</b></td>
	<td>Инвестиционно сребро - 999</td>
	<td style="text-align:right">0.76</td>
	<td style="text-align:right">-</td>
</tr>

<tr>
	<td class="row"><b>XAU</b></td>
	<td class="row">Друго инвестиционно злато (1 грам)</td>
	<td style="text-align:right" class="row">64.50</td>
	<td style="text-align:right" class="row">70.77</td>
</tr>

<tr>
	<td><b>917</b></td>
	<td>Злато с чистота 917/22К (гр.)</td>
	<td style="text-align:right">58.65</td>
	<td style="text-align:right">-</td>
</tr>

<tr>
	<td class="row"><b>750</b></td>
	<td class="row">Злато с чистота 750/18К (гр.)</td>
	<td style="text-align:right" class="row">48.12</td>
	<td style="text-align:right" class="row">-</td>
</tr>

<tr>
	<td><b>585</b></td>
	<td>Злато с чистота 585/14К (гр.)</td>
	<td style="text-align:right">37.53</td>
	<td style="text-align:right">-</td>
</tr>

<tr>
	<td class="row"><b>375</b></td>
	<td class="row">Злато с чистота 375/9К (гр.)</td>
	<td style="text-align:right" class="row">23.98</td>
	<td style="text-align:right"...

CSS

.prodListTbl {
  display:none;
}
table td {
  border:1px solid black;
}

JavaScript

var myApp = angular.module('myApp',[]);
function TableCtrl($scope){

	$scope.items = calculate().items;
  $scope.sortOrder = true;
  $scope.sortProp = null;
  $scope.changeSort = function(prop){
     if(prop === $scope.sortProp){
     		$scope.sortOrder = !$scope.sortOrder;
     }
     $scope.sortProp = prop;
  };
 
}
function calculate(){
	var data = parseTable($("table.prodListTbl"));
  return getSortedProduct(data);
}
var weightMap = {	"375":"test",
"585":"test","750":"test","917":"test","H80":"test","H25":"test","XAG":"test","XAU":"test","AN1":1000,"ANF":62.207,"ANG":311.035,"ALU":31.1035,"A16":31.1035,"A15":31.1035,"A14":31.1035,"A13":31.1035,"A12":31.1035,"A11":31.1035,"A10":31.1035,"A09":31.1035,"A08":31.1035,"ANB":15.5517,"ANC":7.775869,"AND":3.11035,"ANE":1.555174,"ANA":31.1035,"CNA":31.1035,"CNB":15.5517,"CNC":7.775869,"CND":3.11035,"CNE":1.555174,"EBU":31.1035,"EGA":31.1035,"EGB":15.5517,"EGC":7.775869,"EGD":3.11035,"GVA":31.1035,"GMA":31.1035,"GM9":31.1035,"GMB":15.5517,"GMC":7.775869,"GMD":3.11035,"GME":1.555174,"KRA":31.1035,"KRB":15.5517,"KRC":7.775869,"KRD":3.11035,"PHA":31.1035,"PHB":15.5517,"PHC":7.775869,"PHD":3.11035,"ADU":3.442,"AD4":13.76,"COR":30.49,"CUR":6.6146,"BLE":5.806,"NLG":6.056,"ILI":5.806,"MXP":37.5,"FCE":5.806,"FGE":5.806,"FMR":5.806,"Q10":2.902,"N20":5.806,"N10":2.902,"NKA":31.1035,"GMW":7.166,"ESV":7.315,"ES1":7.315,"SVR":5.806,"DK2":8.062,"DK1":4.031,"R10":7.742,"R05":3.869,"TUN":5.806,"HFO":5.806,"EGO":30.092614,"PLH":1000,"PLG":250,"PLF":100,"PLE":50,"PLO":31.1,"PLD":20,"PLC":10,"PLB":5,"PLA":2.5,"PL1":1};
function getSortedProduct(data){
		var items = data.items;
    data.items.sort(function(a,b){
    if(a==b){
     return 0;
    } 
    if(a.precentageOverSell > b.precentageOverSell) {
    	return 1;
    }
    return -1;
    })
    for(let coin of data.items){
    	console.log(coin.title,coin.precentageOverSell,coin.sell)
    }
    return data;
}
function parseTable(table){
		var items = table.find("tr");
    var flag =...