开发者

change every 2 rows instead of every table row

开发者 https://www.devze.com 2023-02-04 14:42 出处:网络
I have this cod开发者_Go百科e for changing the class from odd to even for every row. What i would like it to do is go even even odd odd instead of even odd even odd:

I have this cod开发者_Go百科e for changing the class from odd to even for every row. What i would like it to do is go even even odd odd instead of even odd even odd:

window.addEvent('domready', function() {

var count = 0;

$$('table.pretty-table tr').each(function(el) {

el.addClass(count++ % 2 == 0 ? 'odd' : 'even');

});

});


el.addClass(count++ % 4 > 1 ? 'odd' : 'even');


you can use slick.

$$("table.pretty-table tr:nth-child(4n), table.pretty-table tr:nth-child(4n-1)").addClass("even");

simple. http://www.w3.org/TR/css3-selectors/#structural-pseudos

in action: http://www.jsfiddle.net/dimitar/mdtVB/5/

incidentally, it got me wondering if using slick will be faster than the .each loop so i did a little tester class:

http://www.jsfiddle.net/dimitar/mdtVB/6/

slick runs first for 10000 iterations and 10 secs after load, it runs the .each on it too. in FF 3.6.12 on a windows box, slick wins but marginally. calling the table by #id will make a difference too in favour of Slick - http://www.jsfiddle.net/dimitar/mdtVB/8/ (with an added delay of 2 sec before testing start for running jsfiddle properly).


No need of a var count also

window.addEvent('domready', function() {
    $$('table.pretty-table tr').each(function(el, idx) {
        el.addClass(idx % 4 > 1 ? 'odd' : 'even');
    });
});

P.S: Just optimizing the answer of The Scrum Meister.


window.addEvent('domready', function() {

    var count = 0;

    $$('table.pretty-table tr').each(function(el) {
        if ( count == 0 || count % 4 < 2) {
            el.addClass( 'odd' );
        }
        else
        {
            el.addClass( 'even' );
        }
    });
    count++;
});
0

精彩评论

暂无评论...
验证码 换一张
取 消