Изменить класс CSS, связанный со столбцом <TD>, на основе значения столбца с JavaScript

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/