如果条件不起作用，则在 td 上应用不同颜色的颜色答案

【问题标题】：Applying color on td with different colors in if condition not working如果条件不起作用，则在 td 上应用不同颜色的颜色
【发布时间】：2011-11-15 07:13:57
【问题描述】：

我在 td 上应用了不同的文本颜色，但是当我在最后一个 td 上应用颜色时，它会改变所有以上 td 的颜色。例如，在下面的代码中，最后一个是红色的，在执行这一行之后，它也会将上面 td 的颜色更改为红色。我应该如何克服这个问题。 //html

'<table class="ui-widget" width="100%" border="0"  cellspacing="1" cellpadding="2">'+
        '<thead class="ui-widget-header" id="orderListHead">'+
            '<tr>'+
                '<th><strong> Order# </strong></th>'+
                '<th><strong> Exchange </strong></th>'+    
            '</tr>'+
        '</thead>'+
        '<tbody id="orderListBody">'+               
        '</tbody>'+
     '</table>'+

 if(orderList== "Buy"){                      
    $("#orderListBody",this.orderListTable)
         .append('<tr><td>'+orderList.ORDER_NUMBER+'</td><td>'+orderList.SHORT_NAME+'</td></tr>')
         .css("color","green");
 }
 if(orderList == "Sell"){                   
    $("#orderListBody",this.orderListTable)
         .append('<tr><td>'+orderList.ORDER_NUMBER+'</td><td>'+orderList.SHORT_NAME+'</td></tr>')
         .css("color","red");
 }

【问题讨论】：

您正在将 css 应用到整个表格中，请在上面的脚本中添加您的 html 代码
您将 css 添加到 #orderListBody 而不是任何特定的 td

标签： javascript jquery css jquery-ui jquery-selectors

【解决方案1】：

为什么不试试这样的方法：

$("#orderListBody",this.orderListTable).append('<tr class="' + orderList + '"><td>'+orderList.ORDER_NUMBER+'</td><td>'+orderList.SHORT_NAME+'</td></tr>');

并在您的 css 中添加：

.Buy {
  color: green;
}
.Sell {
  color: red;
}

【讨论】：

+1 使用类比直接设置颜色要好得多。

【解决方案2】：

您将 CSS 应用于表格，而不是特定行，您真的不应该有这样的重复代码。

将您的代码更改为：

var newColor;
if (orderList == "Buy") {
    newColor = "green";
} else {
    newColor = "red";
}

$('<tr><td>'+orderList.ORDER_NUMBER+'</td><td>'+orderList.SHORT_NAME+'</td></tr>').css("color", newColor).appendTo($("#orderListBody",this.orderListTable));

这不仅删除了重复的代码，而且它只将 CSS 应用于新行，而不是表选择器。

【讨论】：

【解决方案3】：

我不太清楚你的问题.. 我认为下面的代码将解决您的问题..

if(orderList== "Buy"){                       
                    $("#orderListBody",this.orderListTable).append('<tr><td>'+orderList.ORDER_NUMBER+'</td><td  style="color:green">'+orderList.SHORT_NAME+'</td></tr>');
                }
                if(orderList == "Sell"){                    
                    $("#orderListBody",this.orderListTable).append('<tr><td>'+orderList.ORDER_NUMBER+'</td><td style="color:red">'+orderList.SHORT_NAME+'</td></tr>');
            }

【讨论】：

样式属性应该有“;”在末尾。所以，应该是style="color:green;" & style="color:red;"

【解决方案4】：

以更灵活的方式重写您的代码：

$("$orderListBody, this.orderListTable)
      .append("<tr class='" orderList + "'><td class='" + orderList + "'>"
             +orderList.ORDER_NUMBER+ "</td><td class='" + orderList + "'>"
             +orderList.SHORT_ORDER + "</td></tr>");

然后在你的 CSS 中你可以做任何你喜欢的事情，例如：

tr.Buy { background-color: yellow; }
tr.Sell { background-color: red; }

td.Buy { 
    color: green;
} 

td.Sell {
    color: red;
}

【讨论】：