JSFiddle - React, Tailwind, and code Playground

by Ramkee Mukuru

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="forTable">

</div>

CSS

.green{
  color:green;
}

.red{
  color:red;
}

JavaScript

var array =[{
"forPlant":1,
"forProduction" : 2,
"forAsking" : 3
},
{
"forPlant":2,
"forProduction" : 5,
"forAsking" : 3
},
{
"forPlant":3,
"forProduction" : 100,
"forAsking" : 120
}
]
var forData = "<table>";
var forPlant ="";
var forProduction = "";
var forAsking = "";


for (i=0;i<array.length;i++){
 
 forPlant = array[i]["forPlant"];
 forProduction = array[i]["forProduction"];
 forAsking = array[i]["forAsking"];

forData += '<tr><td>'+forPlant+'</td>';
   
   if(forAsking<forProduction){

                       forData+='<td class="green">'+forProduction+'</td><td class="red">'+forAsking+'</td>';
    
                    }else{
    
                        forData+='<td class="green">'+forAsking+'</td><td class="red">'+forProduction+'</td>';
                    }
    forData+= '</tr>';

}

    forData+= '</table>';
    
     $(".forTable").append(forData);