This is actually a very simple process and only requires a small amount of javascript to do the job.
Follow these steps and your will be highlighting in no time!!!
- Go to your list to be highlighted
- Edit Page
- Add a Content Editor Web Part
- Move the CEWP to the bottom of the page
- Click the Edit Source button
- Copy and paste the following lines of code into the source code section
| <script src=”/PublishingImages/javascript/jquery-1.3.2.min.js” type=”text/javascript”></script><script type=”text/javascript” language=”javascript”>var x = document.getElementsByTagName(“TD”) // find all of the TDsvar i=0;for (i=0;i<x.length;i++){if (x[i].className==”ms-vb2″) //find the TDs styled for lists{
if (x[i].innerHTML==”Next Day Pickup”) //find the data to use to determine the color { x[i].parentNode.style.backgroundColor=’yellow’; // set the color } } } </script> |
- Make your changes to the innerHTML section to reflect the list value for the jquery lookup
- Set the color of your choosing. You can also choose to use the html value for the color: FFFFOO
Please note, I am referencing jquery inside of my SharePoint site. This way, I do not have to add an external reference.
Hi, Eric!
I’ve modified abit your code in order to avoid page scrolling loss when your code is applied to page.
function colorize(){
var x = document.getElementsByTagName(“TD”);
var i=0;for (i=0;i<x.length;i++){
if (x[i].className=="ms-vb2"){
if (x[i].innerHTML=="Next Day Pickup"){
x[i].parentNode.style.backgroundColor='#ccebff';
}
}
}
}
// IE
if (window.attachEvent){
window.attachEvent("onload", colorize);
}
// Other
if (window.addEventListener){
window.addEventListener("load", colorize, false);
}