Why jQuery tablesorter not work on the table created by javascript dynamicly?

问题

I am using javascript function creating table dynamically while user click radio button, then I invoke tablesorter function, but it doesn't work.

Following is my code snippet

function showTable(tableData, elementId){

    $('#' + elementId).html('<table class="table id="output"> </tabble>');
    var table = document.getElementById('output');
    var table1 = document.getElementById('output');
    var headerArr = tableData[0];
    var header = null, row = null, cell = null, rowData = null;

    var row2 = null;
    for (var i = 1; i < tableData.length; i++) {
        row2 = table.insertRow(-1);
        rowData = tableData[i]; 
        for (var j = 0; j < rowData.length; j++) {
            cell = row2.insertCell(j);
            cell.innerHTML = rowData[j];
        }
    }
    /*
     * create header
     */
    header = table.createTHead();
    row = header.insertRow(0);
    for (var i = 0; i < headerArr.length; i++) {
        cell = row.insertCell(i);
        cell.innerHTML = headerArr[i];
    }

    $("#output").tablesorter({widgets: ['zebra']});
}

来源：https://stackoverflow.com/questions/18297317/why-jquery-tablesorter-not-work-on-the-table-created-by-javascript-dynamicly