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