CODEWITHSUNDEEP
jquerycss
PixelMuse
PixelMuse

Reputation: 470

Alternating table row color, but with 2 rows of data

I've got my table setup for Zebra striping, but how do I accomplish making the row color alternate for 2 rows instead of a single row?

My data markup looks like this:

<tr>
        <td>@task.TaskNum</td>
            <td>@task.RepiarTime</td>
            <td>Priority Club</td>
            <td>SD</td>
            <td>Commercial</td>
            <td>Reg Commercial</td>
            <td>After Hours</td>
        </tr>
        <tr><td colspan="7">
                @task.Description.ToString()
            </td></tr>

I am using this to stripe it:

    $(document).ready(function () {
    $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); });
    $(".stripeMe tr:even").addClass("alt");
});

Upvotes: 6

Views: 3396

Answers (6)

codaniel
codaniel

Reputation: 5253

To do striping every two rows:

$('.stripeMe tr:nth-child(3n+3)').addClass('alt');
$('.stripeMe tr:nth-child(3n+4)').addClass('alt');

Upvotes: 4

Turnip
Turnip

Reputation: 36642

Use jquerys nth child like this:

$(document).ready(function () {
    $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); });
    $(".stripeMe tr:nth-child(3n)").addClass("alt"); // 3n selects every third element
});

Upvotes: 0

j08691
j08691

Reputation: 207890

There should be a way in CSS to do this, but if you want jQuery try this jsFiddle example.

jQuery:

var index = 0;
$('tr').each(function() {
    $(this).addClass((index <= 1) ? 'odd' : 'even');
    index++;
    if (index == 4) index = 0;
});​

CSS:

.odd {
    background: #999;
}
.even {
    background: #ddd;
}​

Upvotes: 0

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Try using .filter and get the index() % 3 or (($(this).index()+1) % 3 == 0). See code below,

DEMO

$(document).ready (function () {
    $('#myTable tr').filter(function () {
        //or (($(this).index()+1) % 3 == 0) if you want 3rd row
        //to be highlighted first.

        return ($(this).index() % 3 == 0);
    }).addClass('alt');
});

Upvotes: 1

Kai Sternad
Kai Sternad

Reputation: 22830

Something like this should work:

$(".stripeMe tr").each(function(i){
    if (i%4 < 2){
        $(this).addClass("alt");
    }
});

Upvotes: 6

Wesley Terry
Wesley Terry

Reputation: 195

Why not try nth-child? Here are a bunch of variations here. How nth-child works. I'm sure you can use the pseudo :hover instead of .mouseover in javascript.

Upvotes: 1

Related Questions