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

回答

相关问题