alt
Sponsored links
Online Training
Career Series
Exforsys
Exforsys arrow Tutorials arrow jQuery arrow jQuery Advanced Row Striping
Site Search


jQuery Advanced Row Striping
element and use for the subheading. Such a table's HTML (in abridged form) would look like this:

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

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:

  1. $(document).ready(function() {
  2.  
  3. $('table.striped tbody tr:not([th]):odd').addClass('odd');
  4.  
  5. $('table.striped tbody tr:not([th]):even').addClass('even');
  6.  
  7. });
 

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:


Trackback(0)
Comments (0)add comment

Write comment

busy

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:

  1. $(document).ready(function() {
  2.  
  3. $('table.sortable tbody tr:odd').addClass('odd');
  4.  
  5. $('table.sortable tbody tr:even').addClass('even');
  6.  
  7. });
 

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

  1. tr.even {
  2.  
  3. background-color: #eee;
  4.  
  5. }
  6.  
  7. tr.odd {
  8.  
  9. background-color: #ddd;
  10.  
  11. }
 

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

   
 
 
< Prev   Next >
Exforsys Offers
© 2008 Exforsys.com
Joomla! is Free Software released under the GNU/GPL License.
Page copy protected against web site content infringement by Copyscape