Detaching and attaching

I have the following:

$('th').click(function() {
    var $th = $(this);
    var column = $th.index();
    var $table = $th.closest('table');
    var rows = $table.find('tbody > tr').get();
    rows.sort(function(rowA,rowB) {
        var keyA = $(rowA).children('td').eq(column).text().toUpperCase();
        var keyB = $(rowB).children('td').eq开发者_如何学Python(column).text().toUpperCase();
        if (keyA < keyB) return -1;
        if (keyA > keyB) return 1;
        return 0;
    });
    $.each(rows, function(index,row) {
      $table.children('tbody').append(row);
    });
});

I think it would execute faster if I detached the tbody before sorting it and then attached it back.

Q: How do I use detach and attach to correctly move tbody in and out of the DOM?

---

I believe you need to know where the table is coming from... i.e. if the table were inside a wrapper DIV with ID="tablewrapper", you could change your var $table line to:

var $table = $th.closest('table').detach();

and at the end of your function add:

$table.appendTo('#tablewrapper');

I'm not convinced detaching it will speed things up, and am interested in the results you get.