Highlight SharePoint List rows conditionally using jQuery !

In this article we will see how to Change the row Background color based on the value of a column in a sharepoint list and we will be doing it using jQuery.

Below is a screenshot of a Task Tracker whose rows are highlighted based on the percentage complete.

Here is how you can do it.

1. Create Sharepoint list

2. Edit allitems.aspx page and add a content editor web part and copy the below jQuery code to that webpart.

<script type="text/javascript">
$(document).ready(function(){
$Text = $("td .ms-vb2:contains('Not Started')");
$Text.parent().css("background-color", "#461B7E");
var myelement = $Text.parent().parent();
$Text = $("td .ms-vb2:contains('Completed')");
$Text.parent().css("background-color", "#4CC417");
$Text = $("td .ms-vb2:contains('In Progress')");
$Text.parent().css("background-color", "#EAC117");
});
</script>