Нанесение цвета на тд разными цветами, если условие не работает

Question

Я применяю разные цвета текста к тд, но когда я применяю цвет к последнему тд, он меняет цвет всех тд. Например, в приведенном ниже коде последний является красным, после выполнения этой строки он также меняет цвет выше 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

Переписать свой код с большей гибкостью:

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

Answer 4

/ *

Мне не очень понятен твой вопрос .. Я думаю, что код ниже решит вашу проблему ..

* /

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