SharePoint (2003 thru Online): Change the color of a Web Part Column

Wednesday, June 10, 2015

Change the color of a Web Part Column


We need to place the below code in the CEWP in the page where we have the Source Web Part we want to make the column change.

Here is the sample Code: 

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

      //repeat the above for each data value

      if (x[i].innerHTML=="On track")
      {
     // x[i].parentNode.style.backgroundColor='lightblue'; // set the background color of row
        x[i].style.backgroundColor='blue'; // set the background color of cell
        x[i].style.Color='white'; // set font the color
        x[i].style.fontWeight='bold'; // set font to bold
      }

      if (x[i].innerHTML=="Requires attention")
      {
     // x[i].parentNode.style.backgroundColor='orange'; // set the background color of row
        x[i].style.backgroundColor='orange'; // set the background color of cell
        x[i].style.Color='white'; // set font the color
        x[i].style.fontWeight='bold'; // set font to bold
      }

      if (x[i].innerHTML=="Behind schedule")
      {
     // x[i].parentNode.style.backgroundColor='red'; // set the background color of row
        x[i].style.backgroundColor='red'; // set the background color of cell
        x[i].style.Color='white'; // set font the color
        x[i].style.fontWeight='bold'; // set font to bold
      }
    }
  }
</script>

Code Notes:

x[i] is one of the table cells (TD) 
x[i].innerHTML is the contents of a cell (TD) (which may include additional HTML) 
x[i].parentNode is the row containing the cell (a TR) 
x[i].parentNode.style.stylename is used to set any valid style on the TR

No comments:

Post a Comment