根据元素中的值将 css 分配给该元素

Question

我正在开发一个 Web 应用程序，其中有 table 几列，其中包含一些数据。特别是我有一个名为 Change 的列绑定了一些数据，如下所示

            <td data-bind="text: GradeName"></td>
            <td data-bind="text:Price"></td>
            <td data-bind="text:Change"></td>

Change 的值可以是负数或正数，但如果它是负数，我希望该值显示为红色或黑色。

请问有什么好的方法吗？

Answer 1

你可以这样做：

td[data-bind*="text:Change:-"] { color: red; }

该规则只匹配属性为data-bind且以text:-开头的<td/>，表示负数

Example on CodePen

Answer 2

如果您想使用 jQuery 那么这是我为您提供的解决方案 jsFiddle:

jQuery(document).ready(function(){
    var dataElem;
    jQuery('td').each(function(){
        dataElem = jQuery(this);
        if(dataElem.data('bind')){
            if(dataElem.data('bind').substr(dataElem.data('bind').indexOf(":") + 1) === "Change"){
                if(parseInt(dataElem.html()) < 0){
                    dataElem.css("background-color", "red");
                }
            }
        }
    });
});

以上代码假定 positive/negative 值将在数据属性 Change 引用的 td 元素中找到。我很乐意在澄清后对此答案进行更改。

Answer 3

没有 CSS 选择器可让您根据元素的内容设置元素的样式，因此您无法仅在 CSS.

中执行此操作

但是，Knockout 可以在绑定数据时为您设置样式：您可以使用 css binding or style binding。这是一个样式绑定示例：

<td data-bind="text: GradeName"></td>
<td data-bind="text: Price"></td>
<td data-bind="text: Change, style: { color: Change<0 ? 'red' : 'black' }"></td>

现场演示：

ko.applyBindings({ GradeName:"grade", Price:"€100.0", Change:-10, OtherField:10 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table><tr>
  <td data-bind="text:GradeName"></td>
  <td data-bind="text:Price"></td>
  <td data-bind="text:Change, style: { color: Change<0 ? 'red' : 'black' }"></td>
  <td data-bind="text:OtherField, style: { color: OtherField<0 ? 'red' : 'green' }"></td>
</tr></table>

根据元素中的值将 css 分配给该元素

Assigning css to an element based on the value in that element

html

css

html-table