CODEWITHSUNDEEP
javascriptjquerycss
Misha Moroshko
Misha Moroshko

Reputation: 171359

How to handle alternating rows dynamically?

Consider the following example: (live demo here)

HTML:

<div class="wrapper">
    <div city_id="1" class="odd">Street Name #1 in city 1</div>
    <div city_id="3" class="even">Street Name #2 in city 3</div>
    <div city_id="2" class="odd">Street Name #3 in city 2</div>
    <div city_id="1" class="even">Street Name #4 in city 1</div>
    <div city_id="1" class="odd">Street Name #5 in city 1</div>
    <div city_id="3" class="even">Street Name #6 in city 3</div>
    <div city_id="2" class="odd">Street Name #7 in city 2</div>
    <div city_id="3" class="even">Street Name #8 in city 3</div>
    <div city_id="1" class="odd">Street Name #9 in city 1</div>
</div>
<select>
    <option value="">Please select...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

CSS:

.odd {
    background-color: #777;
}
.even {
    background-color: #aaa;
}

JS:

$(function() {
    $("select").change(function() {
        var city_id = $("option:selected", this).val();
        $("div[city_id]").each(function() {
            $(this).toggle($(this).attr("city_id") == city_id);
        });
    });
});

I would like to keep the alternating coloring even when some rows are hidden.

Is that possible to achieve this with pure CSS ?

If no, how would you do this using Javascript/jQuery ?

Upvotes: 1

Views: 167

Answers (4)

Jishnu A P
Jishnu A P

Reputation: 14382

Here's a simple solution . Dynamically change the row's class while the selected index changes

http://jsfiddle.net/4Bjbc/5/

$(function() {
    $("select").change(function() {
        var city_id = $("option:selected", this).val();
        $("div[city_id]").each(function() {

            $(this).toggle($(this).attr("city_id") == city_id);

        }).filter(":visible")  ///filter the visible ones

          .attr("class",function(index,$class){                

            ///if you don't want to miss out the other classes
            return index%2 == 0 ? $class.replace("odd","even") : $class.replace("even","odd"); 
        });
    });
});

Upvotes: 3

ThiefMaster
ThiefMaster

Reputation: 318518

You can use CSS for it:

.wrapper div:nth-child(even) { background-color: #777; }
.wrapper div:nth-child(odd) { background-color: #aaa; }

However, it won't take hidden rows into account. To achieve this, you need to restrict the div selector even more:

.wrapper div.visible:nth-child(even) { background-color: #777; }
.wrapper div.visible:nth-child(odd) { background-color: #aaa; }

Then you just need to ensure that all visible elements have the visible class.

Upvotes: 2

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

With jquery you could use in the change event:

    $('.wrapper div:visible:even').css({
        'background-color': '#777'
    });
    $('.wrapper div:visible:odd').css({
        'background-color': '#aaa'
    });

FULL CODE

$("select").change(function() {
    var city_id = $("option:selected", this).val();
    $("div[city_id]").each(function() {
        $(this).toggle($(this).attr("city_id") == city_id);
    });
    $('.wrapper div:visible:even').css({
        'background-color': '#777'
    });
    $('.wrapper div:visible:odd').css({
        'background-color': '#aaa'
    });
});

This way it sets the background color taking into account only visible rows

fiddle here: http://jsfiddle.net/4Bjbc/3/

Upvotes: 0

Dan Bizdadea
Dan Bizdadea

Reputation: 1302

you need from javascript to set the class odd or even by walking through the items and if they are visible alternate the class

Upvotes: 2

Related Questions