change SharePoint list field color using jquery code base on value?

Question

I am working with SharePoint list and I need to change the Number field color if it is greater than 60. I tried to change the code below but it did't work. I also checked all answers but none of them solved my problem.

This is my code which didn't work (I tried to use gt)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"type="text/javascript"></script>
<script>
    $(document).ready(function(){
         $Text = $("td .ms-vb2:gt('60')").filter(function() {
         return $(this).text() == "td .ms-vb2";})
         $Text.css("background-color", "#00FF66");
    }); 
</script>

I also used calculate column as you said but it contain error:

Answer 1

Create a calculated field return as a number using the formula below, and display the calculated field in the view instead of your number field:

=IF(Number>60," <div style='background-color:#00FF66;'>"&Number&"</div>"," <div style='background-color:#00FF66'>"&Number&"</div>")

Answer 2

You can use JS link for your problem..

With JS Link, users can add a reference to their JavaScript Files as a WebPart property, and Control the Rendering of Fields & Items in Views, List Forms (Display,New,Edit) and event in WebParts.

And detailed answer of your problem is in the link below..

Color code item row based on column value in SharePoint Foundation 2013

Hope this resolves your problem..

Answer 3

It's possible that your code is firing too early. I often need to wrap my javascript/jquery in a function that fires using the _spBodyOnLoadFunctionNames array.

Example:

function wrapperFunction(){
   *code to run*
}
_spBodyOnLoadFunctionNames.push("wrapperFunction");

Answer 4

I agree that using a calculated field or CSR (jslink) is a better option. But if you needs to do it the way you are doing it, then it looks like you are doing it wrong. The :gt selector is an index selector. From the docs:

index-related selectors

The index-related selector expressions (including this "greater than" selector) filter the set of elements that have matched the expressions that precede them. They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors.

And a number field, at least on SP 2013 is inside a div in the td, with a .ms-number class.

You could do something like this:

  $("table.ms-listviewtable > tbody > tr > td:nth-child(columnNumber) > div").filter(function() { 
        ( parseInt( $(this).text() ) > 59 ) ? $(this).css("background-color", "#00FF66") : null   
    });

Note the :nth-child, replace the columnNumber with column order the number field is in your listview, it's zero based, column 3 = nth-child(2).

The drawbacks are obvious, if someone changes the order, or adds more number fields if you are using .ms-number as selector. That is why calculated column or CSR is the way to go.