Exforsys.com
 

Sponsored Links

 

jQuery Tutorials

 
Home Tutorials jQuery
 

jQuery Advanced Row Striping

 

Learning jQuery - Advanced Row Striping

As we saw earlier in the chapter, row striping can be as simple as two lines of code to alternate the background color:



Sample Code
  1. $(document).ready(function() {
  2. $('table.sortable tbody tr:odd').addClass('odd')
  3. $('table.sortable tbody tr:even').addClass('even')
  4. })
Copyright exforsys.com



If we declare background colors for the odd and even classes as follows, we can see the rows in alternating shades of gray:


Sample Code
  1. tr.even {
  2. background-color: #eee
  3. }
  4. tr.odd {
  5. background-color: #ddd
  6. }
Copyright exforsys.com



While this code works fine for simple table structures, if we introduce non-standard rows into the table, such as sub-headings, the basic odd-even pattern no longer suffices. For example, suppose we have a table of news items grouped by year, with columns for date, headline, author, and topic. One way to express this information is to wrap each year's news items in a element and use   for the subheading. Such a table's HTML (in abridged form) would look like this:


Sample Code
  1.  
  2. <table class="striped">
  3.     <thead>
  4.         <tr>
  5.             <th>Date</th>
  6.             <th>Headline</th>
  7.             <th>Author</th>
  8.             <th class="filter-column">Topic</th>
  9.         </tr>
  10.     </thead>
  11.     <tbody>
  12.         <tr>
  13.             <th colspan="4">2007</th>
  14.         </tr>
  15.         <tr>
  16.             <td>Mar 11</td>
  17.             <td>SXSWi jQuery Meetup</td>
  18.             <td>John Resig</td>
  19.             <td>conference</td>
  20.         </tr>
  21.         <tr>
  22.             <td>Feb 28</td>
  23.             <td>jQuery 1.1.2</td>
  24.             <td>John Resig</td>
  25.             <td>release</td>
  26.         </tr>
  27.         <tr>
  28.             <td>Feb 21</td>
  29.             <td>jQuery is OpenAjax Compliant</td>
  30.             <td>John Resig</td>
  31.             <td>standards</td>
  32.         </tr>
  33.         <tr>
  34.             <td>Feb 20</td>
  35.             <td>jQuery and Jack Slocum's Ext</td>
  36.             <td>John Resig</td>
  37.             <td>third-party</td>
  38.         </tr>
  39.     </tbody>
  40.     <tbody>
  41.         <tr>
  42.             <th colspan="4">2006</th>
  43.         </tr>
  44.         <tr>
  45.             <td>Dec 27</td>
  46.             <td>The Path to 1.1</td>
  47.             <td>John Resig</td>
  48.             <td>source</td>
  49.         </tr>
  50.         <tr>
  51.             <td>Dec 18</td>
  52.             <td>Meet The People Behind jQuery</td>
  53.             <td>John Resig</td>
  54.             <td>announcement</td>
  55.         </tr>
  56.         <tr>
  57.             <td>Dec 13</td>
  58.             <td>Helping you understand jQuery</td>
  59.             <td>John Resig</td>
  60.             <td>tutorial</td>
  61.         </tr>
  62.     </tbody>
  63.     <tbody>
  64.         <tr>
  65.             <th colspan="4">2005</th>
  66.         </tr>
  67.         <tr>
  68.             <td>Dec 17</td>
  69.             <td>JSON and RSS</td>
  70.             <td>John Resig</td>
  71.             <td>miscellaneous</td>
  72.         </tr>
  73.     </tbody>
  74. </table>
  75.  
Copyright exforsys.com



With separate CSS styles applied to   elements within and , a snippet of the table might look like this:
To ensure that the alternating gray rows do not override the color of the subheading rows, we need to adjust the selector expression:


Sample Code
  1. $(document).ready(function() {
  2. $('table.striped tbody tr:not([th]):odd').addClass('odd')
  3. $('table.striped tbody tr:not([th]):even').addClass('even')
  4. })
Copyright exforsys.com




The added selector, :not([th]), removes any table row that contains a   from the matched set of elements. Now the table will look like this:




Read Next: jQuery Three-color Alternating Pattern



 

 

Comments



Post Your Comment:

Members Please Login
Your Name:*
e-mail ID:(required for notification)*
Image Verification: 
 
 Subscribe    

Sponsored Links

 

Subscribe via RSS


Get Daily Updates via Subscribe to Exforsys Free Training via email


Get Latest Free Training Updates delivered directly to your Inbox...

Enter your email address:


 

Subscribe to Exforsys Free Training via RSS
 

 
Partners -  Privacy and Legal Policy -  Site News -  Contact   Sitemap  

Copyright © 2000 - 2010 exforsys.com. All Rights Reserved

Page copy protected against web site content infringement by Copyscape