tdに色を塗ると、条件が違う場合に異なる色で表示されます

Question

私は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

あなたは、テーブルにはなく、特定の行に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 2

/*

私はあなたの質問とあまり明確ではないです.. 私は以下のコードで問題が解決すると思います。..

*/

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 3

代わりに次のようなものを試してみてください。

$("#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 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; 
}