Supriya Pandey Supriya Pandey - 6 months ago 9
CSS Question

Add a css class on td of table according to TD less or more value

I have a table in html with two td content in it. it is a dynamic td.I want to implement the functionality like if in each of table row, each big td value text color displayed as green and less value text display as red;

please find my source code:

forData+='<tr><td>'+forPlant+'</td><td>'+forAsking+'</td><td>'+forProduction+'</td></tr>';
$(".forTable").append(forData);
if(forAsking<forProduction){
console.info("Less value");
//-----here I want to display Whatever value is less it displayed as red and other is green
}else{
//---same manner followed in there as well
console.info("More Asking");
}

Answer

Create 2 classes for those colors

.green{
color:green;
}

.red{
color:red;
}

Then first compare the values then append the result.

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>';

 $(".forTable").append(forData);

You can see the demo here