How to stripe rows for a multiple row record using jQuery?

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'?

Thanks in advance!

Answer 1

If it takes up another row, use the rowspan (HTML) attribute to indicate such.

Answer 2

   <script type="text/javascript">
        $(document).ready(function()
        {
            $('table.grid tbody tr').each(function(i) {
                if(i%3 == 0) {
                    //We're at a 3rd row
                    $(this).addClass('alt1');
                }
                if(i%4 == 0) {
                    //We're at at 4th row
                    $(this).addClass('alt2');
                }
            });
        });
    </script>

Answer 3

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>

Answer 4

Would probably be easier to assign each record (multiline or not) into a separate tbody tag. You can have many tbody tags, and if your record is in multiple rows, then each record in a separate tbody tag makes the most sense here.

$('table.grid tbody:odd tr:first').addClass('alt1');
$('table.grid tbody:odd tr:last').addClass('alt2');

Answer 5

$('table.grid tbody tr:nth-child(4n+2)').addClass('alt1');
$('table.grid tbody tr:nth-child(4n+3)').addClass('alt2');

should work (untested).

Answer 6

Hmm - that table structure is pretty unusual - are you able to show some of the sample data you'd put into a table like that?

In most cases I can think of, it'd be more accurate to use either rowspan (as Nerdling mentioned), or additional TH elements within the body (to give each record a title row), or a combination of both.

Once you have that extra level of detail in your structure, you can write the javascript to read the actual structure of the table, rather than hard coding the stripe 3rd/stripe 4th values into the script. You'd end up with a script that would handle a 3-row record without doing anything extra, for instance.

I'll happily work out the script if you can show some sample data!