How to highlight SharePoint task list using JQuery
In this post I would like to explain you to highlight the SharePoint task list using custom Jquery based task status. Find here how to highlight SharePoint task list using JQuery
I hope at the end of this you will explore yourself to implementing Jquery in SharePoint.
Learn how to highlight SharePoint task list using JQuery
For this post I have chosen Tasks item status column to highlight the tasks by different colors.
In the below code I am checking for status of each task and highlighting them accordingly.
Steps:
Go to Allitems.aspx page of task list and click edit page from ribbon.
Add new content editor web part.
Insert the below code and click ok.
Stop editing of page and now you can see you task list is highlighted as below.
//if status is "Completed" then it will highlights in green color
$Text = $("td .ms-vb2:contains('Completed')");
$Text.parent().css('background-color','green');
$("td .ms-vb2?).css('color','white');
//if status is "In Progress" then it will highlights in orange color
$Text =$("td .ms-vb2:contains('In Progress')");
$Text.parent().css('background-color', 'orange');
//if status is Not Started then it will highlights in Cyan color
$Text =$("td .ms-vb2:contains('Not Started')");
$Text.parent().css('background-color', 'cyan');
What other operators work with td .ms-vb2 besides contains? I am looking for equals.