Colorful SharePoint table

So many time it’s useful to color a cell in a table on SharePoint pages. Out of the box we don’t have a solution to impress our visitors. Although we have the table with numbers inside but coloring the cells regarding to their value it’s more informative.

Image may be NSFW.
Clik here to view.

So use Javascript again to achieve our wish:

Th trick is to look for the ms-vb2 styles in the code. To do so the page has to be loaded before our script starts. In that way all the value information is in hand for the javascript to examine.

//First import jquery.min.js library then

$(document).ready(function() {
var x = document.getElementsByTagName("TD") // find all of the TDs
var i=0; 
 for (i=0;i<x.length;i++) { 
   if (x[i].className.indexOf("ms-vb2") >= 0){ 
     if (x[i].innerHTML=="Green") //find the data to use to determine the color 
     { 
       x[i].style.backgroundColor='#70FA73'; // set the color 
     }
//repeat the above for each data value  here you can use case/switch as well
     if (x[i].innerHTML=="Yellow") { 
      x[i].style.backgroundColor='#FFFF00';
     }
     if (x[i].innerHTML=="Red") { 
      x[i].style.backgroundColor='#FA7070'; 
     } 
     if (x[i].innerHTML=="N/A") { 
       x[i].style.backgroundColor='#CCCCCC'; 
     } 
     if (x[i].innerHTML=="On the bench") { 
      x[i].style.backgroundColor='#f48be8'; 
     }
  }
}
});