alt
Sponsored links
Online Training
Career Series
Exforsys
Exforsys arrow Tutorials arrow jQuery arrow jQuery Three-color Alternating Pattern
Site Search


jQuery Three-color Alternating Pattern
, but filtering out the rows that contain a . This time, however, we attach the .each() method so that we can use its built-in index:

  1. $(document).ready(function() { 
  2.  
  3. $('table.striped tbody tr').not('[th]').each(function(index) { 
  4.  
  5. //Code to be applied to each element in the matched set. 
  6.  
  7. }); 
  8.  
  9. });  
  

To make use of the index, we can assign our three classes to a numeric key: 0, 1, or 2. We'll do this by creating an object, or map: 

  1. $(document).ready(function() { 
  2.  
  3. var classNames = { 
  4.  
  5. 0: 'first', 
  6.  
  7. 1: 'second', 
  8.  
  9. 2: 'third' 
  10.  
  11. }; 
  12.  
  13. $('table.striped tbody tr').not('[th]').each(function(index) { 
  14.  
  15. // Code to be applied to each element in the matched set. 
  16.  
  17. }); 
  18.  
  19. }); 
  

Finally, we need to add the class that corresponds to those three numbers, sequentially, and then repeat the sequence. The modulus operator, designated by a %, is especially convenient for such calculations. A modulus returns the remainder of one number divided by another. This modulus, or remainder value, will always range between 0 and one less than the dividend. Using 3 as an example, we can see this pattern:

3/3 = 1, remainder 0.
4/3 = 1, remainder 1.
5/3 = 1, remainder 2.
6/3 = 2, remainder 0.
7/3 = 2, remainder 1.
8/3 = 3, remainder 2.

And so on. Since we want the remainder range to be 0 – 2, we can use 3 as the divisor (second number) and the value of index as the dividend (first number). Now we simply put that calculation in square brackets after classNames to retrieve the corresponding class from the object variable as the .each() method steps through the matched set of rows: 

  1. $(document).ready(function() { 
  2.  
  3. var classNames = { 
  4.  
  5. 0: 'first', 
  6.  
  7. 1: 'second', 
  8.  
  9. 2: 'third' 
  10.  
  11. }; 
  12.  
  13. $('table.striped tbody tr').not('[th]').each(function(index) { 
  14.  
  15. $(this).addClass(classNames[index % 3]); 
  16.  
  17. }); 
  18.  
  19. }); 
  

With this code in place, we now have the table striped with three alternating background colors:



We could of course extend this pattern to four, five, six, or more background colors by adding key-value pairs to the object variable and increasing the value of the divisor in classNames[index % n].

Tags

See All Tags

Trackback(0)
Comments (0)add comment

Write comment

busy

Learning jQuery - Three-color Alternating Pattern

There may be times when we want to apply more complex striping. For example, we can apply a pattern of three alternating row colors rather than just two. To do so, we first need to define another CSS rule for the third row. We'll also reuse the odd and even styles for the other two, but add more appropriate class names for them: 

  1. tr.even, 
  2.  
  3. tr.first { 
  4.  
  5. background-color: #eee;
  6.  
  7. } 
  8.  
  9. tr.odd, 
  10.  
  11. tr.second { 
  12.  
  13. background-color: #ddd; 
  14.  
  15. } 
  16.  
  17. tr.third { 
  18.  
  19. background-color: #ccc; 
  20.  
  21. }  
  

To apply this pattern, we start the same way as the previous example—by selecting all rows that are descendants of a

 
 
< Prev   Next >
[ Back ]
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