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

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";
rows[i].className = "odd";
<style type="text/css">
background-color: white;
background-color: yellow;

Salaudeen Rajack

Salaudeen Rajack - SharePoint Expert with Two decades of SharePoint Experience. Love to Share my knowledge and experience with the SharePoint community, through real-time 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

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


Leave a Reply

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