Sorting an HTML table with JavaScript

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.

Here is an improved version based on Plater's anwser. Just in case there is DOM elements inside of td tags, the code gets the last child of the cell and get the value, and apply a customized filter to it.

Note: The customized filter here is just an example, and also you don't need to get the last child of the td tags, and it can be any child of your use case.

function sortTable(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 aVal = getDomValue(a[col]);
    var bVal = getDomValue(b[col]);
    var fA = parseFloat(aVal);
    var fB = parseFloat(bVal);
    if (aVal != bVal) {

      if ((fA == aVal) && (fB == bVal)) {
        retval = (fA > fB) ? asc : -1 * asc;
      } // Numerical
      else {
        retval = (aVal > bVal) ? asc : -1 * asc;
      } // String
    }
    return retval;
  });
  /* fill the table with 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];
    }
  }

}

function getDomValue(domString) {
  var value;
  var parser = new DOMParser();
  var element = parser.parseFromString(domString, 'text/xml');
  var content = element.lastChild.innerHTML;

  // Custom filter just in case if there is elements inside of the td.
  // I made two filters to standardize numbers like '$20,000', also I
  // treat whereas ' ' space as '0'
  if (content === ' ') content = content.replace(' ', '0');
  if (content.indexOf('$') !== -1) {
    content = content.replace('$', '');
    content = content.replace(',', '');
  }
  value = isNaN(parseFloat(content)) ? content : parseFloat(content);
  return value;
}