jquery - 将 CSS 应用于模板字段

Question

我正在使用 jQuery 模板来显示记录。代码是

<script id="SalesTemplate" type="text/x-jquery-tmpl"> 
<form id="enterForm" action ="">
        <tbody>
            {{#each items}}
             <tr class="row{{* { res += ($Number % 2);  } }}">
                 <!--td>{{=rId}}</td-->
                 <td>{{=company}}</td>
                 <td>{{=colorLabel}}</td>
                 <td>{{=dueDate}}</td>
             </tr>
            {{/each}}    
        </tbody>           
    </table>         
</form>

我想要做的是，如果 colorLabel 的值是红色的，我想要用红色字体写的值，如果它是绿色的，用绿色字体写。有什么想法可以实现吗？谢谢

Answer 1

这将遍历所有单元格，并检查文本。如果文本值为“红色”，它将字体颜色更改为红色。如果文本值为“绿色”，它将字体颜色更改为绿色。

$('table td').each( function(){
    if ( $(this).html() == 'red' ) {
       $(this).css("color", "red");
    } else if ( $(this).html() == 'green' ){
       $(this).css("color", "green");
    }
});

Answer 2

你也有颜色十六进制或RGB值吗？然后你可以这样做：

<td style="color:{{=colorValue}}">{{=colorLabel}}</td>

如果没有，您可以尝试您的 colorLabels 是否与css 颜色名称匹配并执行以下操作：

<td style="color:{{=colorLabel}}">{{=colorLabel}}</td>

或者，您可以将 colorLabel 设置为类并在 css 中设置颜色：

<td class="{{=colorLabel}}">{{=colorLabel}}</td>

CSS

td.red{
    color:#f00;
}
td.blue{
    color:#00f;
}
...