How to highlight or change styles of fields/cells in SharePoint Lists

In this handy little trick, I have List of projects with a field called Status that contains values of either Green, Amber or Red.

Highlighted column

The below code, inserted into a Content Editor Web Part on the same page as the list, simply hunts for <TD> tags that contain Green, Amber or Red then alters their style!

   var strX;
   strX = document.getElementsByTagName("td");
   for(var i = 0; i < strX.length; i++) {
      if(strX[i].innerText == 'Green') { strX[i].style.background = "#00FF00"; }
      if(strX[i].innerText == 'Amber') { strX[i].style.background = "#FFD800"; }
      if(strX[i].innerText == 'Red') { strX[i].style.background = "#FF2222"; strX[i].style.fontWeight = 'bold'; }

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s