Advanced Search

Alternate Row Colors / Zebra Striping with jQuery

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

Expand | Embed | Plain Text

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.