SharePoint 2013 list column status wise Change row Color using jQuery

Introduction:
In this article we have been given is to put together a Requester monitoring list which is easy enough to do in SharePoint, but the 3 status easy visual way of seeing what status each of the requester was on.

Read some SharePoint tutorials

The status used in this list is:
Approved
Rejected
Pending

These values are populated from a Choice field in the list, But as you can see from the before image below it is not that easy to quickly and easily see what level each of the Requester is on.




SharePoint 2013 list column status wise Change row Color using jQuery
SharePoint 2013 list column status wise Change row Color using jQuery
On the Edit page, select the Insert Web Part tab from the Ribbon. From the Categories menu, select Media and Content and then Script Editor from the Parts menu:
SharePoint 2013 list column status wise Change row Color using jQuery
SharePoint 2013 list column status wise Change row Color using jQuery

Click on the Add button at the bottom of the page to install the Web Part.

Embedding Code to Your Site:

Once the Web Part has been successfully installed on your page, you will see a hyperlink button under the Script Editor labelled EDIT SNIPPET. Click the EDIT SNIPPET link to insert HTML/Script code:



<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(‘Approved’)”);$Text.parent().css(“background-color”, “#01DF3A”);
$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘Rejected’)”);
$Text.parent().css(“background-color”, “#F90101”);
$Text = $(“td.ms-cellstyle.ms-vb2:contains(‘Pending’)”);
$Text.parent().css(“background-color”, “#EAC117”);
});
</script>

SharePoint 2013 list column status wise Change row Color using jQuery
SharePoint 2013 list column status wise Change row Color using jQuery

After you have inputted the appropriate code in the Embed dialog box, click Insert to save the HTML/Script.


Below you can see the end result with some data entered and different names against different action Status

SharePoint 2013 list column status wise Change row Color using jQuery
SharePoint 2013 list column status wise Change row Color using jQuery

Hope this will be helpful.


You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply