使用javascript基于column的值更改与列关联的css类

Question

我有一个网格，其中一个列我想根据结果集中另一个字段的值动态更改使用的css。

所以不是像

那样的东西

<td class='class1'>
    ${firstname}
</td>

伪我想要

{{if anotherColumnIsTrue }}
 <td class='class1'>
  ${firstname}
 </td>
{{/if}}
{{if !anotherColumnIsTrue }}
 <td class='class2'>
  ${firstname}
 </td>
{{/if}}

这件事有可能吗？？

Answer 1

我认为jQuery使这更容易。

很有可能。我假设您希望每行都有这个。让我们假设你有下表：

<table id="coolTable">
    <tr>
        <td class="anotherColumn">True</td>
        <td class="firstName">Chris</td>
    </tr>
    <tr>
        <td class="anotherColumn">False</td>
        <td class="firstName">Roger</td>
    </tr>
</table>

您可以浏览行并使用以下代码有选择地添加类：

$(function(){
    $("#coolTable tr").each(function(i,row){
        if($(row).children("td.anotherColumn").html()=="True") // Any condition here
        {
            $(row).children("td.firstName").addClass("class1");
        }else{
            $(row).children("td.firstName").addClass("class2");
        }
    });
});

看看这个小提琴：http://jsfiddle.net/mrfunnel/LXq3w/2/