Highlight Row, Change Font Color and Highlight One Cell Based on Status or Column Value using JQuery in SharePoint

Colors are good indicator and can tell you something. Using colors on a list can help you identify or at least help you make a quick conclusion about an item. Also, plain texts can be boring and bland.

In this post, I will cover 3 scripts that will apply color to your list based on the status or a column value. This script is working on both SharePoint 2010 and SharePoint 2013...

HIGHLIGHT SINGLE CELL

<script type="text/javascript"

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$Text = $("td.ms-cellstyle.ms-vb2:contains('In Progress')");

$Text.css("background-color", "#95e6f2");

$Text = $("td.ms-cellstyle.ms-vb2:contains('Completed')");

$Text.css("background-color", "#70e120");

$Text = $("td.ms-cellstyle.ms-vb2:contains('Canceled')")

$Text.css("background-color", "#e18620");

});

</script> 

HIGHLIGHT ROW

<script type="text/javascript"

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$Text = $("td.ms-cellstyle.ms-vb2:contains('In Progress')");

$Text.parent().css("background-color", "#95e6f2");

$Text = $("td.ms-cellstyle.ms-vb2:contains('Completed')");

$Text.parent().css("background-color", "#70e120");

$Text = $("td.ms-cellstyle.ms-vb2:contains('Canceled')")

$Text.parent().css("background-color", "#e18620");

});

</script>

CHANGE FONT COLOR

<script type="text/javascript"

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$Text = $("td.ms-cellstyle.ms-vb2:contains('In Progress')");

$Text.css("color", "#0076e5");

$Text = $("td.ms-cellstyle.ms-vb2:contains('Completed')");

$Text.css("color", "#70e120");

$Text = $("td.ms-cellstyle.ms-vb2:contains('Canceled')")

$Text.css("color", "#ff0000");

});

</script>

If you want, you can also combine the highlight row and change font colors.