Change the css class associated with a <TD> column based on value of column with javascript

I have a grid and for one of the columns i want to dynamically change the css used based on the value of another field in the resultset.

So instead of something like

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

pseudo-wise I would like

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

开发者_如何学GoIs this thing possible..?

---

I think that jQuery makes this a lot easier.

It is very possible. I assume that you would want this for each row. Lets assume you have the following table:

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

You could go through rows and selectively add classes using the following code:

$(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");
        }
    });
});

Have a look at this fiddle: http://jsfiddle.net/mrfunnel/LXq3w/2/