How do I apply colors to a SharePoint List, based on Status?

Question

I would like to apply colours to a SharePoint List's rows based on status or similar.

Please could someone tell me in detail how to do this.

Answer 1

There are a lot of posts on the excellent Path To SharePoint blog regarding this subject.

I am not going to list the individual posts, but the technique is called the 'Html Calculated Column'.

Answer 2

Although this is a late answer, this question still gets asked a lot.

I've put together a summary of the possible methods of doing this, with links to pages that have more detailed walkthroughs (including Christophe's solution mentioned by @Muhimbi):

How to do list highlighting in SharePoint

It's my company's blog [sorry], and was inspired by creating a commercial product that has this functionality [sorry], and I inevitably mention the product in the blog [buy now sorry].

Answer 3

below code highlight and add style to parent (closest) table row based on some table cell numeric value

conditional formatting in SharePoint designer was not working right and the way i expected and using this jquery code is much better

<script src="https://portal/SiteAssets/jsLibrary/jquery.1.9.1.min.js"  type="text/javascript"></script>

<script type="text/javascript">
jQuery.noConflict();

jQuery(document).ready(function () {
// Wait until SP.JS has loaded before calling ConditionalFormatting
    ExecuteOrDelayUntilScriptLoaded(ConditionalFormatting, "sp.js");
});

    function ConditionalFormatting(){
        jQuery('table[id*="7011A98DAFA5"] tbody td').each(function(){ 
            var valD=parseFloat(jQuery(this).text());
            if ( valD== 0.16){ 
               jQuery(this).closest('tr').css('background-color','yellow')
            }
            else if ( valD > 0.16){ 
               jQuery(this).closest('tr').css({'background-color':'red'} )
            }
            else if ( valD< 0.16){ 
               jQuery(this).closest('tr').css('background-color','green')
            }   
        });
    } 


</script>