Question

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.

Answer 1

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