Highlight SharePoint List rows conditionally using jQuery
by Hojo Clement • April 15, 2010 • MOSS 2007 • 17 Comments
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>
Is there a step missing?? I created a Test Task List in MOSS 2007 and added the CEWP and there is no color displayed in the rows. Is there something missing after creating the list and before adding the CEWP webpart?? I need something like this to work before Wednesday.
Thanks
Toya
Hi Toya
There was some extra code in our source code. We have removed it. Please use our updated code above and see if it works.
Shoban
Does not work
Hi CY
I have emailed you. Let us know ur issue and we can work it out
Hello,
I did the same thing you said here but it has no effect on my pages.
and also I want to change the condition to when we put a check next to a field, the row
changes its color.
Thanks.
I have had great success with this, but now want to change the colour of the text too.
Can you suggest code to do that too?
You can change color using below code
$Text.parent().css(“color”, “#ffffff”);
Shoban
Hi, I’m trying to the same and I add the script to the CEWP nothing happens. what is missing. Thanks in advance
Alex
@alexmiami
Did you change the ID of the texbox?
Hi
I’ve tried adding this to a list that we have on our MOSS 2007 site. It isn’t working, although other scripts on the page do.
My list has a column called Status, and I’ve amended the script to take the values that we use into consideration.
Where would I find the ID of the text box? Also, does this need adding at the top or bottom of the page? Other scripts are below the main list web part, which is where I’ve added this one. I’ve also tried it above the list WP.
Any suggestions please..
Ta
Mark
Add the code to the botto is the page. You can get the ID of the text box by viewing the source code of the page in a webbrowser.
Thanks for the reply
$(document).ready(function(){
$Text = $(“td .ms-vb2:contains(‘Live’)”);
$Text.parent().css(“background-color”, “#461B7E”);
var myelement = $Text.parent().parent();
$Text = $(“td .ms-vb2:contains(‘Complete’)”);
$Text.parent().css(“background-color”, “#4CC417″);
$Text = $(“td .ms-vb2:contains(‘Future Work’)”);
$Text.parent().css(“background-color”, “#EAC117″);
});
And the code from the source view
Status
I’ve tried changing the field ID to ms-vh2, but still no joy.
Thanks
Edit to above. Not sure how the comment will display for you, but for me, it’s now displaying ‘Status’ as a hyperlink to Javascript: which is the correct column.
Bollocks – You might as well remove this page. There’s enough crap on the internet OR update it with proper instructions
You need to add the “call function” for the library to get the jquery to work. Add this at the top:
Hi,
It is not working, I have followd the steps which you mention, but still no use.
What should I do ?
Thanksm
Srikanth Reddy
Its working fine for conditional formatting but i dont want to put any condition . I want the color for all the field for a specific column