根据值更改 CSS

我被要求对值进行小型验证，如果值大于或小于 0，我需要更改或添加/删除 td 和 i 标记的 css

我的桌子看起来像这样

        <table class="table table-hover" id="studentweek">
            <thead>
                <tr>
                    <th>Year</th>
                    <th">Weeks</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>VAR (%)</td>
                    <td class="text-warning"> <i class="classname">-10.65%</i></td>
                </tr>
                <tr>
                    <td>VAR (diff)</td>
                    <td class="text-warning"> <i class="classname">-13,953</i></td>
                </tr>
                <tr>
                    <td>VAR (%)</td>
                    <td class="text-navy"> <i class="classname">8.81%</i></td>
                </tr>
                <tr>
                    <td>VAR (diff)</td>
                    <td class="text-navy"> <i class="classname">11,320</i></td>
                </tr>
            </tbody>
        </table>

目前我正在对CSS进行硬编码，但我希望能够随着值自动更改而动态更改这些内容，有人可以建议归档此内容的最佳方法吗？

我在 Ajax 请求中考虑做这样的事情：

var sdlyvar = $(parseFloat(".classname").text());

if (sdlyvar < 0){
    $('.classname').removeClass(".classname").addClass("fa-level-down");
} else {
    $('.classname').removeClass(".classname").addClass("fa-level-up");
}

使用 JavaScript parseFloat 解析百分比（http://www.w3schools.com/jsref/jsref_parsefloat.asp).

var percent = $('#sdlyvar').text();
var result = parseFloat(percent) / 100.0;

if (result < 0){
    $('#sdlyvar').removeClass("fa-level-up");
    $('#sdlyvar').addClass("fa-level-down")
} else {
    $('#sdlyvar').removeClass("fa-level-down");
    $('#sdlyvar').addClass("fa-level-up")
}