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:

Alternate color in SharePoint dataview List items

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>

Salaudeen Rajack

Information Technology Professional with Two decades of SharePoint Experience.

3 thoughts on “Alternate Row Color in SharePoint Dataview Web Part List items

  • November 6, 2012 at 9:14 AM

    Hi,

    I didnt use the Conditional Formatting for alternate colors, but the code is still not giving the desired output

    Reply
  • November 5, 2012 at 7:47 AM

    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.

    Reply
    • November 5, 2012 at 5:58 PM

      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!

      Reply

Leave a Reply