Alternate Row Color in SharePoint Dataview Web Part List items
Conditional Formatting? Sure, but the problem is: If some rows are hidden, then conditional formatting will lose its formatting. So, using JavaScript and CSS we can apply alternate styles to SharePoint List items.
Sample screen:
Just add a content editor web part, and place the below code.
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("makeAlternateColor()");
function makeAlternateColor()
{
var table = document.getElementById("Dashboard"); //Get the SharePoint List view's Table id using Firebug or IE Developer Toolbar's help and replace "Dashboard". Otherwise this code wont work!
var rows = table.getElementsByTagName("tr");
//manipulate rows
for(i = 0; i < rows.length; i++)
{
if(i % 2 == 0)
{
rows[i].className = "even";
}else
{
rows[i].className = "odd";
}
}
}
</script>
<style type="text/css">
.odd
{
background-color: white;
}
.even
{
background-color: yellow;
}
</style>
Hi,
I didnt use the Conditional Formatting for alternate colors, but the code is still not giving the desired output
Thanks Salaudeen Rajack ,
the code worked fine…. bt it creates problem if we delete any of the list item….. for example if I delete the 2nd row then 1 and 3 row are odd numbers and the code will give the same color to both rows,instead of alternate colors. kindly help.
Hi There,
If you use SharePoint Designer “Conditional Formatting” to apply Alternate rows color, it would be a problem when we delete rows, as you stated.
But here we are fetching rows at page load and apply styles dynamically, so it won’t occur!