how to append back the sorted columns of a table in jquery

Question

$(document).ready(function() {
    $('#sort_table th').click(function(){

        var compare_rows = function (a,b) {
            var a_val = $(a).text().toLowerCase();
            var b_val = $(a).text().toLowerCase();

            if (a_val > b_val) {
                return 1;
                }
            if (a_val < b_val) {
                return -1
            }
        return 0;
        }

        //sort

        $('#sort_table .clickable').sort(compare_rows).appendTo('#sort_table');
        });

    });

I have three columns in my table, and im testing to sort the first column, but the appendTo will just mess the table up, it appends the new column as a row.

here's a sample http://jsfiddle.net/Kga4A/

Answer 1

$(document).ready(function() {
    $('#sort_table th').on('click', function(){
        var compare_rows = function (a,b) {
            return $(a).text().toLowerCase().localeCompare( $(b).text().toLowerCase() );
        }

        var elems = $('#sort_table .clickable').get();
        elems.sort(compare_rows);
        $(elems).each(function(i,el) {
            console.log(el)
            $('#sort_table > tbody > tr:eq('+i+')').prepend(el);
        });

    });
});

FIDDLE