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>
         $Text = $("td .ms-vb2:gt('60')").filter(function() {
         return $(this).text() == "td .ms-vb2";})
         $Text.css("background-color", "#00FF66");

I also used calculate column as you said but it contain error: This is my formula and what I was trying with your answers This is error when I ok the column

  • Your last mention of the column says Distancer instead of Distance
    – Erin L
    Mar 29, 2016 at 15:03
  • ohh! let me check I didn't see that!
    – Shaghayegh
    Mar 29, 2016 at 16:14
  • I checked it still not working and syntax error
    – Shaghayegh
    Mar 29, 2016 at 16:52
  • And Distance is a number field, not single line of text?
    – Erin L
    Mar 29, 2016 at 17:07
  • yes, Distance is a number field
    – Shaghayegh
    Mar 29, 2016 at 17:20

4 Answers 4


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

  • Thanks it is great but it didn't work and when I replaced the Column Named Distance with Number it says syntax error.
    – Shaghayegh
    Mar 29, 2016 at 5:49
  • Can you add a screenshot of your formula to your original post?
    – Erin L
    Mar 29, 2016 at 12:59
  • sure! I posted above.
    – Shaghayegh
    Mar 29, 2016 at 13:28
  • I tried but it didn't work& I am closing to the idea that a feature is close or something is not activate in administration. do you have any idea for that ?
    – Shaghayegh
    Mar 30, 2016 at 11:28
  • 1
    @Shadi the separator could be different for you, it depends on the locale. In the example above ( haven't tested it), the sepertor is , , but like in my locale I have to use ; instead of , Mar 30, 2016 at 19:17

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

  • thanks! there was a problem in this case when I uploaded the js file into the Master Page Gallery there was only 2 content type fro publishing page, where should I bring the JavaScript content type?
    – Shaghayegh
    Mar 30, 2016 at 11:35
  • You can add the same from site content types. Mar 30, 2016 at 13:15
  • Is your issue resolved? Mar 31, 2016 at 11:20
  • No! despite all answers I faced with errors. I am trying to solve and if I found the way surly I will write here! Thanks
    – Shaghayegh
    Apr 2, 2016 at 15:01

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.


function wrapperFunction(){
   *code to run*
  • Thanks but can I ask something: is it some additional code to myself coding? Since I am fresh code writer and I was trying to mix some codes I think my code include some mistakes as well. isn't it?
    – Shaghayegh
    Mar 30, 2016 at 11:32

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.

  • thanks but as you said the list should be so flexible in Col order and I think is would be a bit risky but thank you for output. surely I will use somewhere else.
    – Shaghayegh
    Mar 30, 2016 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.