Stosuję różne kolory tekstowe na TD, ale gdy stosuję kolor na ostatnim TD zmienia kolor wszystkich powyżej TD. E.G W poniższym kodem ostatni jest czerwony, po wykonaniu tej linii zmienia kolor powyżej TD do Red. Jak powinienem pokonać ten problem. // 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");
 }
0
JN_newbie 15 listopad 2011, 11:13

3 odpowiedzi

Najlepsza odpowiedź

Stosujesz CSS do stołu, a nie do konkretnego wiersza i naprawdę nie powinieneś mieć takiego duplikatu kodu.

Zmień kod na ten:

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

To nie tylko usuwa powtarzający się kod, ale stosuje CSS tylko do nowego wiersza, a nie do selektora tabeli.

1
jfriend00 15 listopad 2011, 07:23

/ *

Nie jestem dużo jasny ze swoim pytaniem .. Myślę, że poniższy kod rozwiązuje twój problem ..

* /

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>');
            }
0
Akhil Thayyil 15 listopad 2011, 07:21

Przepisz swój kod z nieco większą elastycznością:

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

Następnie w CSS możesz zrobić, co chcesz na przykład:

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

td.Buy { 
    color: green;
} 

td.Sell {
    color: red;
}
0
Ahmed Masud 15 listopad 2011, 07:25