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

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

My table looks something like this

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

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?

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

Answers:

Answer

Use JavaScript parseFloat for parsing percentage (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")
}
Answer

Your first problem is that you can't compare a string like "-10.95%" with an integer, because of the final % symbol. You have to use parseFloat on tha value:

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

It will take care of all the non-numeric stuff after the number.

Then, you'd probably want to remove the opposite class when updating:

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

A few random suggestions:

  1. Make clear what's wrong in your code when posting on StackOverflow
  2. When referring an element more than once with jQuery, consider putting the selection in a variable, like var $sdlyvar = $("sdlyvar");: faster to type and execute.
  3. Save us some whitespaces when posting code :/
Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.