mattruma mattruma - 2 months ago 18
HTML Question

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

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

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>
Comments