CODEWITHSUNDEEP
javascriptjqueryhtml
Sachin
Sachin

Reputation: 139

How to swap jquery css on runtime

I have a table with Up and Down button in all the rows and i want to move rows onclick of up/down in respective directions in table. I am able to do it but the issue is i have a style sheet for alternate rows which i do not want to move along with row movement. But current function move css also which looks very wearied on the page. Can someone please let me know how can i stop moving CSS. My code is below -

$(document).ready(function(){
     $(".up,.down").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
    });
});

I have to check if moving row has come css then it should be stripped and assigned to new row.

Upvotes: 2

Views: 300

Answers (3)

Adam Rackis
Adam Rackis

Reputation: 83358

If I'm understanding you correctly, set up your styles like this:

        tr:nth-child(even) {  }

        tr:nth-child(odd) {  }

Now when you move rows around, the styles won't get messed up. Just note that this will likely not work in ancient browsers. If you have to support IE7 ish, your might have to do a bit more work.

Upvotes: 2

optimusprime619
optimusprime619

Reputation: 764

wondering if this seem a bit acceptable 

$(document).ready(function(){
 $(".up,.down").click(function(){
    var row = $(this).parents("tr:first");
    var new_class='';
    var neigbour_class='';
    if (row.hasClass('odd')) {
       new_class='even';
       neighbour_class='odd';
    }
    else {
       new_class='odd';
       neighbour_class='even';
    }
    if ($(this).is(".up")) {
        row.insertBefore(row.prev());
        row.removeClass().addClass(new_class);
        row.prev().removeClass().addClass(neighbour_class);
    } else {
        row.insertAfter(row.next());
        row.removeClass().addClass(new_class);
        row.next().removeClass().addClass(neighbour_class);
    }
});
});

Upvotes: 1

Dau
Dau

Reputation: 8858

try this

$(document).ready(function(){
     $(".up,.down").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }

        $("table tr:odd").removeClass('even odd').addClass('odd');
        $("table tr:even").removeClass('even odd').addClass('even');
    });
});

read odd selector and even selector

Upvotes: 0

Related Questions