CODEWITHSUNDEEP
javascriptjqueryhtmljsp
AKIWEB
AKIWEB

Reputation: 19612

How to change the color of a value depending on certain conditions using jquery?

I am working on spring MVC project, in which I am passing the data from controller to jsp page. And then I am showing the data in my jsp page.

Below is my table row in JSP page in which I am showing the data and that object I am getting from the controller -

<tr>
    <th>${m.machineName}</th>
    <td>${m.Fresh_95}</td>
    <td>${m.Fresh_99}</td>  
</tr>

Now what I need to do is if the value of m.Fresh_95 is greater than 100.00 then only I would like to show this value {m.Fresh_95} in red color otherwise I won't change the color. Is this possible to do in jquery and jsp?

Upvotes: 0

Views: 1283

Answers (1)

Kai Qing
Kai Qing

Reputation: 18833

You could give it a class for easy look up and use jquery to add a class if necessary...

<td class="color-changer">${m.Fresh_95}</td>

javascript: grab the text value and convert it to a number with a basic stripping regex since I don't know what the value of this will be (dollar amount, any text with digits, etc):

$(document).ready(function(){
    $('.color-changer').each(function(){
        if(Number($(this).text().replace(/[^0-9\.]+/g,"")) > 100)
            $(this).addClass('red');
    });
});

and of course give your .red class some css:

.red{
    color:#ff0000;
    font-weight:bold;
}

Upvotes: 1

Related Questions