Изменение CSS ячейки таблицы на основе значения в другой ячейке той же строки в HTML

Question

Я работаю на веб-странице HTML, где у меня есть таблица с некоторыми данными, и я пытаюсь контролировать CSS для целого столбца в таблице на основе значений в другом столбце и той же строке

Например, в следующем скриншоте у меня есть данные

на рисунке выше, у меня есть Volume, Price and Type. Теперь я хочу контролировать цвет Price column на основе соответствующего значения в столбце Type. Вроде для Price=10 У меня есть Type как Sell, поэтому я хочу сделать значение 10 до red color и аналогично, если тип Buy, тогда значение цены должно быть в желтом.

Я пытаюсь сделать это с помощью следующего скрипта

<td data-bind="text: Volume"></td>  
       <td data-bind="text: (typeof Price() === 'number') ? Price().toFixed(2) : '',css:{cclientType:Type=='Sell'}"></td> 
       <td data-bind="text: Type"></td> 

Но это, кажется, не работает.

При условии, что данные поступают от Knockout View model, который, в свою очередь, тянется от SQL Server.

Есть ли лучший способ добиться этого?

Answer 1

Я бы установил стили на <tr> на основе содержимого столбца типа (или любого другого столбца) и обработал все, что вам нужно в CSS.

Например.

<tr class="sell"> 
    <td>100</td>  
    <td>10.00</td>  
    <td>Sell</td>  
</tr> 

tr.sell td:nth-of-type(2) { 
    color: red; 
} 

Если вам не нравится с помощью переключателя nth-of-type, вы можете установить класс на <td>, а затем ваш селектор CSS будет:

tr.sell td.price { 
    color: red; 
} 

Answer 2

Вы можете добавить ko.computed функцию каждый из ваших элементов данных, чтобы помочь вам определить CSS:

self.volume = ko.observable(volume); 
    self.price = ko.observable(price); 
    self.type = ko.observable(type); 
    self.priceCss = ko.computed(function() { 
    if (self.type() == 'buy') { 
     return 'buy-class'; 
    } else if (self.type() == 'sell') { 
     return 'sell-class'; 
    } else return ''; 
}); 

Это может быть добавлена ​​к разметке:

<tr> 
    <td data-bind="text:volume"></td> 
    <td data-bind="text:price, css: priceCss"></td> 
    <td data-bind="text:type"></td> 
</tr> 

plunker демонстрирует это можно увидеть here

Answer 3

Dev. Пожалуйста, попробуйте! Работает.

<td data-bind="text: volume"></td>  
<td data-bind="text: (typeof price() === 'number') ? price().toFixed(2) : '',css:{ cclientType: type() == 'sell'}"></td> 
<td data-bind="text: type"></td>