Highlight line items in a SharePoint list

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!!!

  1. Go to your list to be highlighted
  2. Edit Page
  3. Add a Content Editor Web Part
  4. Move the CEWP to the bottom of the page
  5. Click the Edit Source button
  6. 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>

  1. Make your changes to the innerHTML section to reflect the list value for the jquery lookup
  2. 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.

2 Replies to “Highlight line items in a SharePoint list”

  1. 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);
    }

Leave a Reply