Question

I am currently using the following jQuery script to highlight rows in my table, and it works great!

   <script type='text/javascript'>         $(document).ready(function()         {             $('table.grid tbody tr:odd').addClass('alt');         });     </script> 

This works great for tables of data where each row is truly a new record, however, I have run into an issue where I have records that take up two rows of data and would like to modify the jQuery so it renders something like:

<table>     <thead>         <tr>             <th>Col 1</th>             <th>Col 2</th>         </tr>     </thead>     <tbody>         <tr>             <td>Record 1 Field 1</td>             <td>Record 1 Field 2</td>         </tr>         <tr>             <td colspan='2'>Record 1 Field 3</td>         </tr>         <tr class='alt1'>             <td>Record 2 Field 1</td>             <td>Record 2 Field 2</td>         </tr>         <tr class='alt2'>             <td colspan='2'>Record 2 Field 3</td>         </tr>         <tr>             <td>Record 3 Field 1</td>             <td>Record 3 Field 2</td>         </tr>         <tr>             <td colspan='3'>Record 1 Field 3</td>         </tr>         <tr class='alt1'>             <td>Record 4 Field 1</td>             <td>Record 4 Field 2</td>         </tr>     <tr class='alt2'>         <td colspan='4'>Record 2 Field 3</td>     </tr> </tbody> </table> 

How would I accomplish this in jQuery where I want every 3rd row to have a class of ‘alt1’ and every 4th row to have a class of ‘alt2’?

Answer 1

The above answer is slightly correct. Instead of using i%3==0 and i%4==0, use the same modulus divisor. So, starting at 0, i%4==2 and i%4==3 would skip two, take two, skip two, take two, etc. The other way takes the 3, 4, 6, 8, 9, 12, etc. So, minor modification would be

<script type='text/javascript'>     $(document).ready(function()     {         $('table.grid tbody tr').each(function(i) {             if(i%4 == 2) {                 //Each 3rd row in sets of 4                 $(this).addClass('alt1');             }             if(i%4 == 3) {                 //Each 4th row in sets of 4                 $(this).addClass('alt2');             }         });     }); </script>