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

Salaudeen Rajack - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

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

  • Hi,

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

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

Your email address will not be published. Required fields are marked *