html - 根据 TD 或多或少的值在表的 td 上添加一个 css 类

Question

我有一个 html 表格，里面有两个 td 内容。这是一个动态的td。我想实现这样的功能，比如在每个表行中，每个大 td 值文本颜色显示为绿色，较小值文本显示为红色；

请找到我的源代码:

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 1

为这些颜色创建 2 个类

.green{
color:green;
}

.red{
color:red;
}

然后先比较值，然后附加结果。

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