根据HTML中同一行的另一个单元格中的值更改表格单元格的CSS

Question

我正在开发一个HTML网页，其中我有一个包含一些数据的表格，我正在尝试根据另一列和同一行中的值控制表格中整个列的CSS

例如，在下面的屏幕截图中，我有我的数据

在上图中，我有Volume, Price and Type。现在，我想根据Price column列中的相应值控制Type的颜色。与Price=10一样，Type为Sell，因此我想将值10设为red color，类似地，如果type为Buy，那么Price值应为在黄色。

我正在尝试使用以下脚本

<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又来自{{1}}。

我有更好的方法可以实现这一目标吗？

Answer 1

您可以为每个数据项添加一个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>

可以看到一名证明这一点的掠夺者here

Answer 2

开发。 请试试这个！的工作原理。

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

Answer 3

我会根据type column（或任何其他列）的内容在<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;
}