Table Row Swap

by amindunited

HTML

<table class="eg_table">
    <thead></thead>
    <tbody>
        <tr><td>1</td><td>One</td><td>i</td><td><a class="down">v</a></td><td><a class="up">^</a></td></tr>
        <tr><td>2</td><td>Two</td><td>ii</td><td><a class="down">v</a></td><td><a class="up">^</a></td></tr>
        <tr><td>3</td><td>Three</td><td>iii</td><td><a class="down">v</a></td><td><a class="up">^</a></td></tr>
        <tr><td>4</td><td>Four</td><td>iv</td><td><a class="down">v</a></td><td><a class="up">^</a></td></tr>
    </tbody>
</table>

CSS

.eg_table tr { height:30px; }
.eg_table td { width:80px;  border-bottom: solid 1px #cccccc; }

JavaScript

$(document).ready(function(){
    setup_swapper();
});

function row_swapper() {
    var that = this;

};

row_swapper.prototype.swap_down = function(targ){
    var firstElm = $(targ);
    var secondElm = $(targ).closest('tr').next();
    firstClone = firstElm.clone().appendTo('body');
    secondClone = secondElm.clone().appendTo('body');
}

function setup_swapper(){
    var rs = new row_swapper();
    $('.eg_table a').each(function(i, obj){
        $(this).click(function(e){
            e.preventDefault();
            if ($(this).is('.down')) {
                rs.swap_down($(this))
            }
        })
    })
}