CODEWITHSUNDEEP
jqueryhtmlcsshtml-table
mattruma
mattruma

Reputation: 16677

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

Upvotes: 1

Views: 2311

Answers (6)

Ben Hull
Ben Hull

Reputation: 7673

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!

Upvotes: 0

Ms2ger
Ms2ger

Reputation: 15983

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

should work (untested).

Upvotes: 1

Tracker1
Tracker1

Reputation: 19334

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');

Upvotes: 1

Rich
Rich

Reputation: 36806

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>

Upvotes: 4

Steerpike
Steerpike

Reputation: 17544

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

Upvotes: 2

Jeremy L
Jeremy L

Reputation: 7797

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

Upvotes: -1

Related Questions