Question

我在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");
 }

Answer 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;
}

Answer 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应用于新行，而不是表格选择器。

Answer 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>');
            }

Answer 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;
}

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

4 个答案: