color coading to sharepoint list columns using javascript(with out calculate columns)

color coading to sharepoint list columns using javascript(with out calculate columns)

i have Status column with three status Red,Amber,Green

Add this code in sharepoint list(ALLITEMS.ASPX) content editor webpart.different column is having any of this status (Red,Amber,Green) that place also color coading will work automatically


Code

<script src="/sites/testingsite/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){
$(".ms-formbody:contains('Red')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" redstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-formbody:contains('Amber')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" amberstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-formbody:contains('Green')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" greenstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-vb2:contains('Red')").each(function()
{
if( $(this).text()=="Red")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" redstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-vb2:contains('Amber')").each(function()
{
if( $(this).text()=="Amber")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" amberstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

$(".ms-vb2:contains('Green')").each(function()
{
if( $(this).text()=="Green")
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" greenstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

});</script>
<style type="text/css">
.redstatus{
padding:2px; border: 1px red; background-color:red;color:#FFFFFF;width:80px;
}
.amberstatus{
padding:2px; border: 1px orange; background-color:orange;color:#FFFFFF;width:80px;
}
.greenstatus{
padding:2px; border: 1px green; background-color:green;color:#FFFFFF;width:80px;
}
</style>

Screenshot

After adding the different status Processcheck with statuses Inprogress,Completed,Resolved

Here is the code

<script src="/sites/magellanreporting/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function(){
$(".ms-formbody:contains('Red')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" redstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-formbody:contains('Amber')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" amberstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-formbody:contains('Green')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" greenstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-formbody:contains('Inprogress')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" inprogresstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-formbody:contains('Completed')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" completedstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-formbody:contains('Resolved')").each(function()
{
if( $(this).html().toLowerCase().indexOf("div")==-1)
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+="resolvedstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

$(".ms-vb2:contains('Red')").each(function()
{
if( $(this).text()=="Red")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" redstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-vb2:contains('Amber')").each(function()
{
if( $(this).text()=="Amber")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" amberstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

$(".ms-vb2:contains('Green')").each(function()
{
if( $(this).text()=="Green")
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" greenstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });
$(".ms-vb2:contains('Inprogress')").each(function()
{
if( $(this).text()=="Inprogress")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" inprogressstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
});
$(".ms-vb2:contains('Completed')").each(function()
{
if( $(this).text()=="Completed")
{
  var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" completedstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

$(".ms-vb2:contains('Resolved')").each(function()
{
if( $(this).text()=="Resolved")
{
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.className+=" resolvedstatus";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
}
 });

});</script>
<style type="text/css">
.redstatus{padding:2px; border: 1px red; background-color:red;color:#FFFFFF;width:80px;}
.amberstatus{padding:2px; border: 1px orange; background-color:orange;color:#FFFFFF;width:80px;}
.greenstatus{padding:2px; border: 1px green; background-color:green;color:#FFFFFF;width:80px;}
.inprogressstatus{padding:2px; border: 1px blue; background-color:blue;color:#FFFFFF;width:80px;}
.completedstatus{padding:2px; border: 1px Brown; background-color:Brown;color:#FFFFFF;width:80px;}
.resolvedstatus{padding:2px; border: 1px Purple; background-color:Purple;color:#FFFFFF;width:80px;}
</style>


Screenshot