Advanced Search

MooTools alternate table row colors

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. .shade-table	{ /* just to remind us we're using this -- we don't want to write over it later! */ }
  2. .odd		{ background:#ccc; padding:3px; }
  3. .even		{ background:#eee; padding:3px; }
  4.  
  5. window.addEvent('domready', function() {
  6. 	var count = 0;
  7. 	$$('table.shade-table tr').each(function(el) {
  8. 		el.addClass(count++ % 2 == 0 ? 'odd' : 'even');
  9. 	});
  10. });
  11.  
  12. <table class="shade-table" border="1" cellpadding="5" cellspacing="2"><tbody>
  13. <tr>
  14. <td>1</td>
  15. <td>1</td>
  16. <td>1</td>
  17. <td>1</td>
  18. </tr>
  19. <tr>
  20. <td>2</td>
  21. <td>2</td>
  22. <td>2</td>
  23. <td>2</td>
  24. </tr>
  25. <tr>
  26. <td>3</td>
  27. <td>3</td>
  28. <td>3</td>
  29. <td>3</td>
  30. </tr>
  31. <tr>
  32. <td>4</td>
  33. <td>4</td>
  34. <td>4</td>
  35. <td>4</td>
  36. </tr>
  37. <tr>
  38. <td>5</td>
  39. <td>5</td>
  40. <td>5</td>
  41. <td>5</td>
  42. </tr>
  43. </tbody></table>

URL: http://davidwalsh.name/sugar/mootools/page/4

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.