How should I sort an HTML table with Javascript in a more efficient manner?

Here is the pure JS for sorting table data. I used first column which holds numbers. You have to modify column index and condition statement as per your requirements. I hope that solves your problem...

    // Table data sorting starts....
    function sortData(){
        // Read table body node.
        var tableData = document.getElementById('data_table').getElementsByTagName('tbody').item(0);

        // Read table row nodes.
        var rowData = tableData.getElementsByTagName('tr'); 

        for(var i = 0; i < rowData.length - 1; i++){
            for(var j = 0; j < rowData.length - (i + 1); j++{

                //Swap row nodes if short condition matches
                if(parseInt(rowData.item(j).getElementsByTagName('td').item(0).innerHTML) > parseInt(rowData.item(j+1).getElementsByTagName('td').item(0).innerHTML)){
                    tableData.insertBefore(rowData.item(j+1),rowData.item(j));
                }
            }
        }
    }
    // Table data sorting ends....

HTML Table:

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

HTML Table: Sorted

    <table id="data_table" width="200" border="1">
        <tbody>
        <tr>
            <td width="100">01</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>02</td>
            <td>bbb</td>
        </tr>
        <tr>
            <td>03</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>04</td>
            <td>ddd</td>
        </tr>
        <tr>
            <td>05</td>
            <td>eee</td>
        </tr>
        <tr>
            <td>06</td>
            <td>fff</td>
        </tr>
        </tbody>
    </table>

Here is demo.

I ran into some trouble with ProGM's solution.

1. It didn't take numerical sorting into account.
2. IE did NOT like setting this line: tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>";
3. It would destroy any attributes assigned to any part of the table (css class names and etc)

I have made adjustments:

function sort_table(tbody, col, asc)
{
    var rows = tbody.rows;
    var rlen = rows.length;
    var arr = new Array();
    var i, j, cells, clen;
    // fill the array with values from the table
    for(i = 0; i < rlen; i++)
    {
        cells = rows[i].cells;
        clen = cells.length;
        arr[i] = new Array();
      for(j = 0; j < clen; j++) { arr[i][j] = cells[j].innerHTML; }
    }
    // sort the array by the specified column number (col) and order (asc)
    arr.sort(function(a, b)
    {
        var retval=0;
        var fA=parseFloat(a[col]);
        var fB=parseFloat(b[col]);
        if(a[col] != b[col])
        {
            if((fA==a[col]) && (fB==b[col]) ){ retval=( fA > fB ) ? asc : -1*asc; } //numerical
            else { retval=(a[col] > b[col]) ? asc : -1*asc;}
        }
        return retval;      
    });
    for(var rowidx=0;rowidx<rlen;rowidx++)
    {
        for(var colidx=0;colidx<arr[rowidx].length;colidx++){ tbody.rows[rowidx].cells[colidx].innerHTML=arr[rowidx][colidx]; }
    }
}

To address point #1, I added in the calls to parseFloat() and then compared the result the original value (You change to checking if it produces NaN instead). If both values are numeric, they compared via numerical preference and not by their string versions.

For points #2 and #3, I solved it via the same set of code. Instead of destroying the whole table body by setting the innerHTML, I change the individual cell contents to the new sorted values:

for(var rowidx=0;rowidx<rlen;rowidx++)
{
    for(var colidx=0;colidx<arr[rowidx].length;colidx++)
    { 
        tbody.rows[rowidx].cells[colidx].innerHTML=arr[rowidx][colidx]; 
    }
}

That only works if yours all have the same number of columns, but if you do not, sorting is much more complex anyway.