Sharepoint 2007: Color coding for cells or rows in lists

I needed to find a way to color code (highlight) something based on a status or value in a list view.

There are 2 ways
(a) will color code the whole row
(b) will color code only the cell where the argument to highlight is.

The implementation of both is the same it just has a slightly modified script to highlight.

Prerequisites:

• We have a Sharepoint 2007 list
• We have at least “design” level permission (Can create lists and document libraries and edit pages in the Web site)  to the site where the list is located
• we have 1 column with the “status or keyword” we want to color code

The below codes for either row or cell color code will need to be added to a list view as a “Content Editor Web Part” source code.

To do so:

On your list view where you like to highlight something with a color, click on “Site Actions” -> “Edit Page”

Add a “Web part” -> “Content Editor Web Part”. Move this new “Web Part” below the list you like to highlight (very important since the code needs to be loaded after the list).

Click on “edit” -> “modify Shared Webpart” and you will get on the right bar the “Content Editor Web Part”

uncollaps “Appearance” and under “Chrome Type” select “none”

To complete now, click on “Source Editor” and paste the below codes as per need.

(a) color code the whole line

<script type="text/javascript" language="javascript">
  var x = document.getElementsByTagName("TD") // find all of the TDs
  var 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=="On Time") //find the data to use to determine the color
      {
        x[i].parentNode.style.backgroundColor='lightgreen'; // set the color
      }
      if (x[i].innerHTML=="#NUM!") //find the data to use to determine the color (in this case looking for a calc error)
      {
        x[i].parentNode.style.backgroundColor='red'; // set the color
      }
      if (x[i].innerHTML=="Imminent") //find the data to use to determine the color
      {
        x[i].parentNode.style.backgroundColor='gold'; // set the color
      }
    //repeat the above for each data value
    }
  }
</script>

Result:
Something like this

b) Color Code a cell

<script type="text/javascript" language="javascript">
  var x = document.getElementsByTagName("TD") // find all of the TDs
  var 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=="Green") //find the data to use to determine the color
      {
        x[i].style.backgroundColor='green'; // set the background color
        x[i].style.color='white'; //set the font color
      }
      if (x[i].innerHTML=="Red") //find the data to use to determine the color
      {
        x[i].style.backgroundColor='red'; // set the background color
        x[i].style.color='white'; //set the font color
      }
      if (x[i].innerHTML=="Amber") //find the data to use to determine the color
      {
        x[i].style.backgroundColor='orange'; // set the background color
        x[i].style.color='black'; //set the font color
      }
    }
  }
</script>

Result:
Something like this