Alternate Row Colors / Zebra Striping with jQuery


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. // jQuery
  2. $(function(){
  3. $("tr.stripe:even").css("background-color", "#D0D0D0");
  4. $("tr.stripe:odd").css("background-color", "#E5E5E5");
  5. }
  6.  
  7.  
  8. // HTML
  9. <table>
  10. <tr class="stripe">
  11. <td>Col 1</td>
  12. <td>Col 2</td>
  13. <td>Col 3</td>
  14. </tr>
  15. <tr class="stripe">
  16. <td>Col 1</td>
  17. <td>Col 2</td>
  18. <td>Col 3</td>
  19. </tr>
  20. <tr class="stripe">
  21. <td>Col 1</td>
  22. <td>Col 2</td>
  23. <td>Col 3</td>
  24. </tr>
  25. </table>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.