正在更改< td> < i>基于CSS的CSS [英] Changing <td> <i> CSS based on the value

问题描述

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

I have been asked to implement a small validation on values and if the values are greater or less than 0 i need to change or add/remove the css for the td and i tag

我的表格看起来像这样

        <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但我想能够动态地更改这些值

currently i am hard coding the css but i would like to be able to dynamicly change these as the values change automatically, can someone suggest the best way to archive this?

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

i was thinking in my Ajax request to do something like this:

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

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

推荐答案

https://api.jquery.com/slice/rel =nofollow>。slice 将删除此代码中的％符号，其余代码将比较该值并分配或删除类

Here .slice will remove the % sign in this code and the rest of the code will compare the value and assign or remove class

var sdlyvar = $('#sdlyvar').text();   

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

这篇关于正在更改< td> < i>基于CSS的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！