根據HTML中同一行的另一個單元格中的值更改表格單元格的CSS

我正在處理HTML網頁，其中有一些表格中包含一些數據，並且我試圖控制整個列的CSS基於在另一列和同一行根據HTML中同一行的另一個單元格中的值更改表格單元格的CSS

例如，值的表，在下面的屏幕截圖我有數據

enter image description here

在上述畫面，我有Volume, Price and Type。現在，我想根據Type列中的相應值控制Price column的顏色。喜歡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。

有沒有更好的方法可以實現這個目標？

來源

2014-12-18 DoIt

如果'Type'是可觀察到的，使用'CSS：{cclientType：類型（）==「賣」}' – Origineil

工作得很好，我如何給它多CSS，因爲我在這個問題提到，如果它然後賣紅色，如果它是買，那麼黃？ – DoIt

沒關係，我明白了。謝謝 – DoIt

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

來源

2014-12-18 18:56:41 im1dermike

那麼，無論Type列中的值如何，整個列都會變成紅色 – DoIt

@Dev：您應用了我提供的CSS不正確。 – im1dermike

請參閱http://jsfiddle.net/crq4jrfo/嘗試將最後一列中的值更改爲買入或賣出，無論您輸入什麼值，它只是給出價格欄的紅色 – DoIt

你可以添加一個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

來源

2014-12-18 21:01:49

開發。請試試這個！作品。

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

來源

2014-12-25 10:18:42

根據HTML中同一行的另一個單元格中的值更改表格單元格的CSS

回答

相關問題