Transpose HTML table using jQuery

transpose_table.js

$(function() {
    var t = $('#thetable tbody').eq(0);
    var r = t.find('tr');
    var cols= r.length;
    var rows= r.eq(0).find('td').length;
    var cell, next, tem, i = 0;
    var tb= $('<tbody></tbody>');

    while(i<rows){
        cell= 0;
        tem= $('<tr></tr>');
        while(cell<cols){
            next= r.eq(cell++).find('td').eq(0);
            tem.append(next);
        }
        tb.append(tem);
        ++i;
    }
    $('#thetable').append(tb);
    $('#thetable').show();
}

Can you modify this script so that it runs when a button is clicked?

This code works

It works great. But I have other requirement. I have multiple tables on my pages and these tables are dynamicaly generated. And all of these tables have headers. I want to transponse the table including the headers. And want to maintain the row styles too. I would be great if you modify the js to meet the above requirement. Thanks