根据值更改 <td> <i> CSS

Changing <td> <i> CSS based on the value

本文关键字：CSS td      更新时间：2023-09-26

>我被要求对值进行一个小验证，如果值大于或小于 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")
}

你的第一个问题是你不能将像"-10.95%"这样的字符串与整数进行比较，因为最后的%符号。您必须在以下值上使用parseFloat：

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

它将处理数字后面的所有非数字内容。

然后，您可能希望在更新时删除相反的类：

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

一些随机建议：

  1. 在 StackOverflow 上发布时明确代码中的问题
  2. 当使用 jQuery 多次引用一个元素时，请考虑将选择放在变量中，例如 var $sdlyvar = $("sdlyvar"); ： 键入和执行速度更快。
  3. 发布代码时为我们节省一些空格：/

在这里 .slice 将删除此代码中的 % 符号，其余代码将比较值并分配或删除类

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

var lis=document.querySelectorAll("tr td i");
for(var i in lis){
    if(parseInt(lis[i].innerHTML)<0){
    lis[i].className+=" fa-level-down";
  }
  else{
        lis[i].className+=" fa-level-up";
  }
}
相关文章：